如何动态等于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

基本上把内部容器在那里，与侧边栏背景颜色，以及侧边栏设置为透明。然后，如果要让背景在水槽中显示，请在主内容区域上放置一个边框，以便获得一种人造水槽。

警告：主要内容区域需要比侧边栏长，否则“排水沟”只会显示为与主要内容区域相同。我通常会通过在主要内容区域设置最小高度来“修复”这个问题。