html - 拉伸(stretch)空 DIV 100% 并获取它的高度

Question

我有一些 html 模板，它有两个左右浮动的 DIV。其中一个更高(我不知道哪个，因为它只是模板)。因此，这些 DIV 之一下方有一些可用空间。我在那里添加了空的 DIV(free-div-1 和 free-div-2)，我希望它们以自由高度拉伸(stretch)。

为什么我需要这个？我想知道可用空间的大小以使用 ajax 填充一些内容。但我总是得到这些 block 的零高度。

当然，我可以将这个空间计算为左右 DIV 之间的差异。但我的问题是关于自动拉伸(stretch)空 div，这可能吗？

谢谢。

CSS:

.first {
  width: 200px;
  float: left;
  background:aqua;
}
.second {
  width: 150px;
  float: right;
  background:yellow;
}
.container {
  width: 400px;
  background: #ccc;
}
/* Without text trick the container will be of 0px height */
.container:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; 
}
.free-block-1, .free-block.2 {    
  background: red;
}

HTML:

<div class="container">
  <div class="first">
    <div class="first-content">
      <p>First content block. Can have any height.</p>
      <p>First content block. Can have any height.</p>
      <p>First content block. Can have any height.</p>
      <p>First content block. Can have any height.</p>
      <p>First content block. Can have any height.</p>
      <p>First content block. Can have any height.</p>
      <p>First content block. Can have any height.</p>
    </div>
    <div class="free-block-1"></div>
  </div>
  <div class="second">
    <div class="first-content">
      <p>Second content block. Can have any height.</p>
      <p>Second content block. Can have any height.</p>
      <p>Second content block. Can have any height.</p>
      <p>Second content block. Can have any height.</p>      
    </div>
    <div class="free-block-2"></div>
  </div>
</div>

真实示例:http://jsbin.com/edubar/4/edit

Answer 1

从字面上看只是在这里回答了这个问题:Vertically align to a dynamic height from another div?

基本上，使用表格模型而不是 CSS 的盒模型。然后它将像一张 table 一样，单元格拉伸(stretch)到整个 table 的高度。

这是更新后的垃圾箱:http://jsbin.com/edubar/5/edit