Question

我有以下场景我希望Div2高度调整大小取决于Div3的内容我怎么能这样做？

----------------------------------
.      DIV1                      .
. ---------   ------------------ .
. .       .   .                . .
. .  DIV2 .   .        DIV3    . .
. .       .   .                . .
. .       .   .                . .
. ---------   -----------------. .
.--------------------------------

Answer 1

你可以使用display: table-cell css属性，虽然被警告，它是CSS3，并且在IE8之前的任何东西都没有很多支持。

示例：

<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

CSS：

.div1 {
    display: table;
}
.div1 > div {
    border: 1px solid #000;
    width: 200px;    
    display: table-cell;
}
.div3 {
    height: 500px;
}

小提琴：http://jsfiddle.net/97NJR/

Answer 2

尝试使用CSS属性display: table-cell。请参阅此jsFiddle。

修改

使用花车，尝试更新jsFiddle
或者同样地one。两者都提供了一个优雅的解决方案。

Answer 3

我想你想要显示DIV2和DIV3的相同高度。通过CSS，您可以执行以下操作：

<强> HTML

<div class="wrapper">
    <div class="child_1">First Div content goes here</div>
    <div class="child_2">Second Div content goes here</div>
</div>

<强> CSS

.wrapper {
        width: 960px;
        overflow: hidden;
        margin: 0px auto;
    }

    .child_1, .child_2 {
        padding-bottom: 1000px;
        margin-bottom: -1000px;
        width: 50%;
        float: left;
    }

    .child_1 {
        background: #f00;
    }

    .child_2 {
        background: #0f0;
    }

如果根据代码高度为1000px，则上面的代码将显示div高度相等。你可以改变1000px，如果你认为在某些情况下差异可能更大。它将在所有浏览器中支持

其他明智的你可以使用javascript。你需要找到最长div的高度，并在其他div中设置相同的高度。

Auto Div高度取决于另一个

3 个答案: