使用 div 获得两个等高列的最简单方法

Question

我有一个内容栏和一个侧边栏。内容栏有一个白色的背景，侧边栏有一个轻微的渐变背景图像。内容列始终比侧边栏长，因此侧边栏图像不会延伸到底部。如何使用 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%;
}

Combining 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);