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

基本上将内部容器放在那里，侧边栏背景颜色，并将侧边栏设置为透明。然后，如果你想要在排水沟中显示背景，请在主要内容区域放置一个右边界，这样你就可以得到一种人造排水沟。

警告：主要内容区域需要比侧边栏长，或者“装订线”仅显示为主要内容区域。我通常会通过在主内容区域设置最小高度来“修复”这个问题。