Question

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

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

当然，我可以将此空间计算为左右DIV之间的差异。但我的问题是关于自动延伸空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的盒子模型。然后它就像一张桌子，细胞伸展到桌子的整个高度。

这是更新的bin：http://jsbin.com/edubar/5/edit

Answer 2

您好，您只需将您的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;

}

now link is here please check to it

http://jsfiddle.net/H3Z9z/

伸展空DIV 100％并获得它的高度

2 个答案: