htmlページを50％の高さの2つの行に分割する

Question

htmlページを50％ずつ2行に分割したいと考えています。これに対して、私はrow1とrow2として機能する2つのdivを作成し、それらの高さを設定しました：cssで50％。 Row1には3つのdivがあり、2つのdivには2つのdivがあります。私は、これらの内側のdivがスクロールバーがそれぞれの行のdivに入るはずであるが、row1とrow2は画面の50％しか占めていないはずです。私のHTMLの

内容は次のとおりです。CSSの

<div class="row" id="row1"> 
    <div class="dragbox" id="item1" > 
     <h2 class="dragbox-h2">Handle 1</h2> 
     <div class="dragbox-content" > 
     Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. 
    </div> 
    </div> 
    <div class="dragbox" id="item2" > 
     <h2 class="dragbox-h2">Handle 2</h2> 
     <div class="dragbox-content" > 
      Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. 
     </div> 
    </div> 
    <div class="dragbox" id="item3" > 
     <h2 class="dragbox-h2">Handle 3</h2> 
     <div class="dragbox-content" > 
      Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare. 
     </div> 
    </div> 
</div> 
<div class="row" id="row2" > 
    <div class="dragbox" id="item4" > 
     <h2 class="dragbox-h2">Handle 4</h2> 
     <div class="dragbox-content" > 
      Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper. 
     </div> 
    </div> 
    <div class="dragbox" id="item5" > 
     <h2 class="dragbox-h2">Handle 5</h2> 
     <div class="dragbox-content" > 
      Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna. 
     </div> 
    </div> 
</div> 

スニペット：

.row{ 
height:50%; 
background:#fff; 
overflow-y:auto; 
} 

.row .dragbox{ 
margin:5px 2px 20px; 
background:#fff; 
border:1px solid #ddd; 
} 

私は内側のタグの増加の内容は、その後もあれば、行のdivは彼らの50％に固執することを確認することができますどのように割り当てられた高さ。

ありがとうございました。

あなたが行のdiv以上の親ノードが100％自分を占有していることを確認する必要があり

Answer 1

：

html, body{ 
    height: 100%; 
} 

（割合の高さは、彼らの親からそのベースの高さを継承します。）