如何創建流體高度分區？

Question

注意：我仍然在學習CSS & HTML，所以如果這個問題看起來「不好」 - 那是因爲它。如果你能提供一個例子，或者一篇適合我的問題的文章，那就太棒了。

我創建了一個div（「背景」），其中包含兩個div（「left」&「right」）。

我想根據「左」&「右」div中的內容數量來擴展或收縮「背景」div的高度。

#background { 
width:100%; 
height:15em; 
background-color:#FFF; 
box-shadow: 0 0 5px #888; 
-moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
clear:both; 
} 

我現在有「背景」的div的高度設置爲15em，因爲我不知道如何使它膨脹或收縮。我試着將它設置爲「100％」和「自動」，但這些只是使「背景」div消失。

這裏是我完整的HTML & CSS代碼：http://jsfiddle.net/jueRh/

Answer 1

如果你離開你的容器div沒有height價值，它的內容將成爲一個可擴展的容器。

如果您仍然希望您的div具有一定的高度，但擴大飛越內容，則可以使用min-height。也不要請注意，min-height僅由等於或高於enlisted browsers in this link.

編輯支持：但是，如果您要使用float版div S中的容器內，你將不得不clear浮正確渲染。您還可以使用display:inline-block的float選擇，然後你可以跳過clear ING，但that is also support limited.

Answer 2

集overflow: hidden;在#background並刪除height:15em;聲明。

演示：http://jsfiddle.net/sonic1980/jueRh/1/