设置显示：div内的none div仍然占用空间

Question

我有一个主div包含两个div（一个用于标题，另一个用于内容）。主div位于html页面的底部，具有绝对定位。当我隐藏内容div时，它会占用页面底部的空间。

我只需要显示标题div来进行jquery切换..

<div class="tll">
    <div class="tllH">

    </div>
    <div class="tllC">

    </div>
</div>

<style>
    .tll{
        background: yellow;
        height: 100px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .tllH{
        background: green;
        height: 20px;
        width: 100%;
    }

    .tllC{
        background: magenta;
        height: 80px;
        width: 100%;
        display: none;
    }
</style>

Answer 1

对于.tll，您设置的高度为100px。

.tllH仅为20px，巧合.tllC为80px。

Answer 2

这是因为主容器的height是固定的，解决方案存在于此fiddle中。

Answer 3

设置.tll {height：auto}解决了问题！