我有一些html模板,它有兩個DIV左右浮動。其中一個更高(我不知道哪個,因爲它只是模板)。所以在這些DIV之下有一些空閒空間。我在那裏添加了空DIV(free-div-1和free-div-2),我希望它們能夠以自由身高伸展。伸出空的DIV 100%並得到它的高度
爲什麼我需要這個?我想知道可用空間的大小以使用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
我不想設定高度的100%這個DIV,我想把DIV的高度設置爲100%(free-block-1和free-block-2)。 – user1063113 2012-03-27 22:07:18