html - 设置显示 :none div inside div still takes up space

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。