使用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);