html - 如何使一个 div 的高度依赖于另一个 div 的高度？

Question

好吧，我有这么简单的 div 结构:

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

JS Fiddle

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

Answer 1

要扩展我的评论，您不能从语义上做到这一点。你必须使用一些小技巧来伪造 100% 的高度。它被称为人造专栏，您可以阅读更多here .

在你的情况下，我们可以通过添加一些背景 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 .