Html 响应网格中跨列的自动div高度

我为正在制作的响应网格添加了一个JSFIDLE:

每列的一半都有不同数量的文本。我希望两个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>

半1
Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。临时牧师。乌拉姆·科珀（Etiam ullamcorper lorem dapibus velit Succipit ultrices）。在最新的医疗设备中使用Proin。
二分之二
Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。
第三
第三
第三

只需将

容器设置为
显示：表格行

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

只需将
#容器
设置为
显示：表格行

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

我不确定有没有办法在没有设定高度的情况下解决这个问题。但是如果你想猜测平均高度，我会在.half上加上一个最小高度，这样它就可以根据需要增长

#半{最小高度：450px；}

你可能需要一个
明确的答案：两者都是分区之间的div
 我不确定有没有办法在没有设定高度的情况下解决这个问题。但是如果你想猜测平均高度，我会在.half上加上一个最小高度，这样它就可以根据需要增长

#半{最小高度：450px；}

你可能需要一个
明确的答案：两者都是分区之间的div
 如果您不介意删除
#half
div上的float:left，您可以在div上使用
display:table cell
使其拉伸到正确的高度

我更新了你的提琴来说明：
如果你不介意删除
#半个
div上的float:left，你可以在它们上面使用
显示：表格单元格
，使它们伸展到正确的高度

我更新了你的小提琴以说明：
谢谢。如何扩展#一半的高度以填充容器内的空间？左边的黄色盒子比右边的高。谢谢。如何扩展#一半的高度以填充容器内的空间？左侧的黄色框比右侧的高。此外，ID应该是唯一的，因此可能会将
#half
更改为类。此外，ID应该是唯一的，因此可能会将
#half
更改为类。