css - グリッドの div の高さの書式設定

Question

私はjsfiddleコードへのこのリンクを持ってい ます

グリッドの列を両側で同じ高さにフォーマットし、他のグリッドを下に正しく並べようとしています。この例では、半分の列に詳細情報があります (高さが異なります)。残りの半分も同じ高さにしたいです。これは達成可能ですか？

ありがとう、コードは次のとおりです。

 <style>
 #page {
    width:95%;
    text-align:center;
    margin:auto;
}
#row {
    height:100%
}
#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: 50%;
}
#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:200px
}
</style>

<div id="page">
<div id="full">FULL</div>
<div id="half">
    <h1>Half</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</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.</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="row">
    <div id="half">Half
        <br>test</div>
    <div id="quarter">Quarter</div>
    <div id="quarter">Quarter</div>
</div>