自动格在响应电网

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/