Question

当div高度

时，我想等于两个div高度

示例：

<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>

Div 2高度大于div 1

Answer 1

我可能有一个可能的解决方案：

http://jsfiddle.net/adaz/wRcWj/1/

好吧，它可能适用于ie7 +所以我不确定这对你来说是否足够好。

简要说明：

1）设置相对于容器的位置并自行清除它（我使用溢出：隐藏但你也可以使用clearfix）。 2）将其中一个div放入其中，以便容器根据内部的内容进行扩展。 3）将位置绝对设置为一个div，并将其顶部和底部位置设为0px，这将确保它具有100％的高度。

缺点： - 缺乏IE6支持 - 您需要选择哪个div总是具有较少的内容，然后选择绝对位置

希望它有所帮助！

Answer 2

这通常是表的行为，因此您可以使用display: table-cell执行此操作。我以Adaz的例子为基础：http://jsfiddle.net/L2uX4/

Answer 3

将你试图在容器div中平衡的两个div包裹起来，即

<div id="container">
   <div class="column">A<br/>B</div>
   <div class="column">C</div>
</div>

在容器上设置显式高度，并在列上设置height = 100％：

div#container {
   float: left;
   height: 10em;   
}

div.column {
  height: 100%;
  background-color: red;
}

均衡2只用css来划分高度

3 个答案: