Html 100%伸展空DIV并获得其高度

我有一些html模板，它有两个div左右浮动。其中一个更高，我不知道是哪个，因为它只是一个模板。所以在其中一个div下面有一些空闲空间。我在那里添加了空的div-free-div-1和free-div-2，我想让它们按自由高度伸展

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

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

谢谢

CSS:

HTML:

---

真实的例子：

这里只是简单地回答了这个问题：

基本上，使用表模型而不是CSS的框模型。然后，它将像一张桌子一样工作，单元格延伸到桌子的整个高度

---

这是更新后的bin:

您好，您只需像这样更改css文件即可

  .first {
  width: 200px;
  background:aqua;
    display:table-cell;
}
.second {
  background:yellow;
    display:table-cell;
}
.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;

}

---

我不想设置这个DIV的100%高度，我想设置free-block-1和free-block-2下面DIV的100%高度。

<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>

  .first {
  width: 200px;
  background:aqua;
    display:table-cell;
}
.second {
  background:yellow;
    display:table-cell;
}
.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;

}