使用div獲得兩個相等高度的列的最簡單方法

Question

我有一個內容列和一個側欄。內容列有一個白色的bg，側邊欄有一個輕微的漸變bg圖像。內容列總是比側邊欄長，所以側欄圖像不會伸展到底部。我如何始終使用div垂直製作內容和側邊欄的高度？

Answer 1

雖然不是唯一的方式，做到這一點，我最喜歡的就是用「人造塔」絕招：http://www.alistapart.com/articles/fauxcolumns/

的基本思想是把在一個包裝的內容和在一個div漸變背景側邊欄。該包裝div保證與最長的DIV一樣大，因此您的漸變始終可見。

Answer 2

position: absolute通常被認爲是不好的形式，但也可以使用下面的代碼來實現等高列：

HTML：

<div id="container"> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat dignissim accumsan. Aenean nisl ipsum, dictum nec dignissim ac, dictum et lacus. Aenean ac sapien egestas lacus rutrum rutrum. Etiam sit amet libero ac arcu pellentesque bibendum. Nulla dignissim imperdiet nulla, ac dictum lorem feugiat id. Proin convallis tempus commodo. Ut vitae elit velit. Duis lacinia sollicitudin justo et vehicula. Duis sed velit vitae arcu tincidunt condimentum eu eget risus. Maecenas non urna nisi. 

     In ac lacinia dui. Donec lacinia, lacus fermentum ultrices iaculis, leo purus pretium velit, in rutrum est nisi sit amet mi. Curabitur nisl nunc, malesuada ac feugiat et, dignissim vel nisl. Proin ac erat in ipsum laoreet blandit nec nec tortor. Maecenas bibendum risus ac lorem pretium et dignissim lacus laoreet. Aenean suscipit porta leo ut commodo. Phasellus porttitor, nulla eget euismod pellentesque, enim sem consequat ipsum, quis interdum nunc mauris quis mauris. Proin orci est, convallis eu sodales vel, tempus a dolor. Mauris pretium faucibus tincidunt. In mauris arcu, laoreet sit amet ullamcorper sed, malesuada vel felis. Nam sollicitudin pellentesque sapien vel facilisis. Suspendisse risus dolor, tincidunt sit amet auctor nec, mollis ac nisi. Nunc sagittis libero non massa tincidunt at bibendum est pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

     Praesent ullamcorper, odio a euismod mattis, nisi arcu feugiat nisi, eu hendrerit diam augue eget diam. Nulla pellentesque sodales ante id tincidunt. Aliquam in purus vitae ante scelerisque tempor. Duis bibendum, nibh non accumsan pulvinar, lacus libero vestibulum sem, id lacinia erat nisi scelerisque mauris. Ut et tristique metus. Aenean ullamcorper vestibulum metus a laoreet. Vestibulum iaculis vestibulum elit, lobortis pharetra orci adipiscing sit amet. Integer vel molestie nulla. Morbi fringilla erat et nisi varius blandit. Pellentesque nunc ante, tempor vitae tincidunt et, rhoncus et urna. 
    </div> 
    <div id="sidebar"> 
     sidebar 
    </div> 
</div> 

CSS：

#container 
{ 
    width: 500px; 
    position: relative; 
} 

#content 
{ 
    width: 65%; 
    background-color: #000; 
    color: #FFF; 
} 

#sidebar 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    background-color: #EEE; 
    width: 33%; 
} 

結合top: 0和bottom: 0導致元素伸展到極限（只要沒有聲明高度）。參見jsFiddle進行演示。

Answer 3

有很多不同的方法來實現這一點。我發現，正確的解決方案很大程度上取決於您的HTML架構。這就是說，如果你對HTML/CSS的使用很困難，那麼我絕望的解決方法是使用JS（本例中爲jQuery）。因爲這個原因，我不建議你在你的項目中包含jQuery。我只是提供一個我之前使用過的替代品。

http://jsfiddle.net/zZpuU/

var h1=$('#div1').height(); 
var h2=$('#div2').height(); 

if (h1>h2) 
    $('#div2').height(h1); 
else 
    $('#div1').height(h2);