html - 如何使一个 div 的高度取决于另一个 div 的高度？

Question

好吧，我有这么简单的 divs 结构：

<div id="wrapper">
    <div id="1" class="block">
    1            
    </div>
    <div id="2" class="block">
    2
    </div>
</div>

JS小提琴

的内容#1可以通过javascript动态更改，并且可以根据内容更改其高度。我想要的是#2与#1. 我知道我可以为此目的使用 javascript，但我建议必须有一些不那么棘手的方法来使这些 div 的高度相等，仅使用 CSS 和/或以某种方式更改 div 的定位。

Answer 1

要扩展我的评论，你不能在语义上这样做。你必须使用一个小技巧来伪造 100% 的高度。它被称为仿列，您可以在此处阅读更多内容。

在您的情况下，我们可以通过添加一些背景 div 来伪造它：

<div class="background bg1"></div>
<div class="background bg2"></div>

然后像这样改变你的CSS：

#wrapper {
    border: 1px solid black;
    position: relative;
}

#wrapper:after {
    display: block;
    content: " ";
    height: 0;
    clear: both;
}

.block {
    position: relative;
    float: left;
    vertical-align: top;
    width: 200px;
    text-align: left;
    min-height: 200px;
    padding-left: 20px;
    z-index: 2;
}

.background {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 1;
}

.bg1 {
    background-color: #eee;
}

.bg2 {
    left: 200px;
    background-color: #aaa;
}​

这是一个有效的jsFiddle。

Answer 2

jQuery 方式：使用 .height() 返回 Div1 的高度，然后简单地使用 .css() 将 Div2 设置为 Div1 的高度。当 div 1 发生变化时，您可以使用 resize 事件来触发会改变 div2 高度的函数。

CSS 方式：Christian Varga 的回答似乎很完美。