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

Question

好吧,我有这样简单的div结构:

<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和/或改变divs的位置如何.

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.