伸出空的DIV 100％并得到它的高度

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的盒子模型。然后它就像一张桌子一样，细胞伸展到桌子的整个高度。

下面是更新斌：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/