如何動態等於DIV高度

Question

我在佈局中有兩列。主要內容和側欄。我的要求是，如果主要內容不斷增加，側欄應自動調整其高度。我想實現這一點，反之亦然。

下面是示例代碼：http://jsfiddle.net/SZ7y9/4/

這將是巨大的，如果我得到的修爲IE6太。

Answer 1

仿列是好的，但如果你想要一個純CSS版本 - http://jsfiddle.net/spacebeers/s8uLG/3/

你設置你的容器了溢出設置爲隱藏，然後在每一個DIV添加負邊距底部和相等正邊距底部。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div> 

編輯：如果你想有一個邊框圓它，然後看看這個例子 - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Answer 2

我覺得人造列會的工作：http://www.alistapart.com/articles/fauxcolumns/

Answer 3

我已經看到了這個需要一百萬次。一般我會做什麼是這樣的：

Fiddle

基本上把內部容器在那裏，與側邊欄背景顏色，以及側邊欄設置爲透明。然後，如果要讓背景在水槽中顯示，請在主內容區域上放置一個邊框，以便獲得一種人造水槽。

警告：主要內容區域需要比側邊欄長，否則「排水溝」只會顯示爲與主要內容區域相同。我通常會通過在主要內容區域設置最小高度來「修復」這個問題。