2个高度相同的DIV容器

Question

我想在一个父div中在一起的两个不同的div上获得相同的高度。 在详细解释之前，让我向您展示简单的代码：

<div id="wrapper">
  <div id="box_one">
  ...
  </div>
  <div id="box_two">
  ...
  </div>
</div>

#wrapper{
  width:1170px;
  margin:0 auto;
  text-align:left;
}
#box_one{
  width:860px;
  background-color:#FCFCFC;
}
#box_two {
  float:left;
  width:310px;
  background-color:#FCFCFC;
}

这就是代码的基本外观。 现在让我解决问题。 第一个div#box_one将动态内容-我不能说这将会是多少-同为#box_two 。 但是我仍然希望双方div共享相同的高度。 在这里， min-height不是一个有用的解决方案，并且将wrapper + body + html设置为height: 100%并且这两个dov都不值得，因为它会使其他布局崩溃。

那么有什么办法还是我必须找到另一种方法而不是使用两个div ？

Answer 1

现场演示在这里（单击）。

您真正需要的只是display: table-cell 。

.foo {
  display: table-cell;
  width: 49%; /* not exact, just for this example */
  vertical-align: top;
}

<div class="foo">Some stuff in here.</div>
<div class="foo">Other stuff in here.</div>

Answer 2

最好只使用几行jQuery代码，结果是最好的

    $('.parent-div').each(function(){  
        var highestBox = 0;
        $('.child-div', this).each(function(){

            if($(this).height() > highestBox) 
                 highestBox = $(this).height(); 
            });  

            $('.child-div',this).height(highestBox);
    });