自動格在響應電網

Question

跨列高度我加了的jsfiddle爲響應網格我提出：http://jsfiddle.net/dankellaway/FUSfs/1/

每一列一半已經改變文本的量。我希望兩個div的列具有相同的高度。這兩個部分都在一個容器格內。你如何使它們的大小相同而不必設置爲固定的高度？無論div中的文本數量多少，我都希望在高度上展開。謝謝。

代碼：

CSS

#page { 
width:95%; 
text-align:center; 
margin:auto; 
} 
#row { 
height:100% 
} 
#container { 
height: auto; 
} 
#header { 
width:100%; 
background-color: rgb(0, 143, 213); 
height:50px; 
} 
#full { 
width:99%; 
margin:0.5%; 
background-color:blue; 
} 
#half { 
width:48%; 
margin:0.5%; 
padding:0.5%; 
float:left; 
background-color:yellow; 
height:100%; 
} 
#third { 
width:32.333%; 
float:left; 
margin:0.5%; 
background-color:blue; 
} 
#quarter { 
width:23%; 
margin:0.5%; 
padding:0.5%; 
float:left; 
background-color:blue; 
height:100px 
} 

HTML

<div id="container"> 
<div id="half"> 
    <h1>Half 1</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div> 
<div id="half"> 
    <h1>Half 2</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.  

</div> 
</div> 
<div id="third">Third</div> 
<div id="third">Third</div> 
<div id="third">Third</div> 

Answer 1

，只要將#container到display: table-row;

#container { 
    height: auto; 
    display: table-row; 
} 

Answer 2

我不確定有沒有辦法解決這個問題，沒有設定的高度。但是如果你想猜測平均高度，我會爲.half添加一個最小高度，這可以根據需要增長。

#half { min-height: 450px; }

而且你可能需要在段之間的clear:both;股利。

Answer 3

如果您不介意刪除float：留在#half div上，您可以使用display:table-cell來使它們伸展到正確的高度。

我更新你的小提琴說明：http://jsfiddle.net/FUSfs/3/