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这里不是一个有用的解决方案，并且将包装器+ body + html设置为height: 100%，这两个dov也不值得一提，因为它会使其他布局崩溃。

那么有没有办法或者我必须找到另一种方式而不是使用两个div？

Answer 1

Live demo here (click).

你真正需要的只是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);
    });

2 DIV高度相同的容器

2 个答案: