伸出空的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/