html - 如何动态等于DIV高度

Question

我的布局中有两列。主要内容和侧边栏。我的要求是如果主要内容在增长，侧边栏应该自动调整它的高度。我想实现这一点，反之亦然。

这是示例代码:http://jsfiddle.net/SZ7y9/4/

如果我也能修复 IE6 就太好了。

Answer 1

人造列很好，但如果您想要纯 CSS 版本 - http://jsfiddle.net/spacebeers/s8uLG/3/

您将容器设置为 overflow hidden ，然后在每个 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