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来达到这个目的，但我建议必须有一些不那么棘手的方法来使这些div的高度仅使用CSS和/或改变divs的定位如何。

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。

Answer 2

jQuery方式：使用.height（）返回Div1的高度，然后使用.css（）将Div2设置为Div1的高度。当div改变时，你可以使用resize事件触发一个改变div2高度的函数。

CSS方式：Christian Varga的答案似乎完美无缺。

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

2 个答案: