css - 2个高度相同的DIV容器

Question

我想在两个不同的 div 上获得相同的高度，这两个 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

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>