如何动态地等于DIV高度

I have two columns in my layout. Main content and side bar. My requirement is the side bar should automatically adjust its height if the main content is growing. And I want to achieve this vice versa.

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

Here is the sample code: http://jsfiddle.net/SZ7y9/4/

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

It will be great if I get the fix for IE6 too.

如果我也能搞定IE6就太好了。

3 个解决方案

#1

Faux columns is good but if you want a pure CSS version - http://jsfiddle.net/spacebeers/s8uLG/3/

假列很好，但是如果您想要一个纯CSS版本——http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

您将容器设置为溢出设置为隐藏，然后在每个div中添加负的margin-bottom和相等的正划底。

#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>

EDIT: If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

编辑:如果你想要一个边框，可以看看这个例子:http://www.ejeliot.com/samples/equal- heiight - columns/exam-6.html

#2

I think faux columns would work: http://www.alistapart.com/articles/fauxcolumns/

我认为山寨专栏可以用:http://www.alistapart.com/articles/fauxcolumns/

#3

I've seen this needed a million times. Generally what I'll do is this:

我已经看过无数次了。一般来说，我要做的是:

Fiddle

小提琴

Basically put an inner container in there, with the sidebar background color, and set the sidebar to transparent. Then, if you want the background to show through in the gutter, put a border-right on the main-content area, so that you get a sort of artificial gutter.

基本上，在其中放置一个内部容器，使用侧边栏的背景颜色，并将侧边栏设置为透明。然后，如果你想让背景在阴沟中显示出来，在主内容区放一个边框，这样你就得到了一种人工阴沟。

Caveat: The main content area needs to be longer than the sidebar, or the "gutter" will only show as far down as the main content area. I'll generally "fix" this by setting a minimum height on the main-content area.

注意:主内容区域需要比边栏长，否则“gutter”只会显示到主内容区域的下方。我通常通过设置主内容区域的最小高度来“修复”这个问题。

#1