設置顯示：無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。