如何使两个垂直DIV长度相同？

Question

我有以下HTML：

<div id="body">
  <div id="left">xx</div>
  <div id="right">yy
    aa
    <br>
    <br>    
    <br>  
    aa
  </div>
</div>

和以下CSS：

#body { background-color: yellow; }
#left, #right { float: left; }
#left { background-color: blue; }
#right { background-color: red; }

我需要的是左边的DIV长到与右边的DIV相同的长度？这可能吗？我尝试过一些东西，但它不起作用。

fiddle

Answer 1

有很多方法可以尝试。你没有给他们中的任何一个height分配，所以他们现在不会做太多。如果你添加相同的高度，它们可以是相同的。你可以尝试style="height:100%;"两个

或者将其添加到CSS中的这些ID，或者使用它创建一个类并将其分配给您的div。

Answer 2

像这样的东西$（“＃right”）。css（“height”，$（“＃left”）。css（“height”））;

Answer 3

以下是使用display：table-cell

的方法

无法在旧浏览器中使用。

http://jsfiddle.net/ZrGBB/

Answer 4

你可以在左边内部这样做

<div class="left">
aa
   <div class="right">
     bb
     <br/>
     <br/>
     bb
   </div>
<div style="clear:both"></div>
</div>

并向右浮动右侧div并使用clear清除左侧的colaps：两者

Answer 5

没有真正简单的一行代码方法可以做到这一点，但网上有很多解决方案，如Faux Columns或Equal Height Columns。

给它一个Google，找到最适合你的解决方案。