Question

我有一个内容列和一个侧边栏。内容列有一个白色bg，侧边栏有一个轻微的渐变bg图像。内容列始终长于侧边栏，因此侧边栏图像不会延伸到底部。如何使用divs始终使内容和侧边栏列垂直相同？

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

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

3 个答案: