设置显示：无div 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 {height：auto}修复了问题！

Answer 2

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

.tllH只是20px而巧合的是.tllC是80px。

Answer 3

这是因为主容器的height是固定的，解决方案出现在这个fiddle。