Chia trang html thành hai hàng có chiều cao 50%

Question

Tôi muốn có trang html được chia thành hai hàng 50% mỗi trang. Đối với điều này tôi đã thực hiện hai divs tính năng như row1 và row2 và thiết lập chiều cao của họ: 50% trong css. Row1 có thêm 3 div trong đó và hàng 2 có thêm 2 div trong đó. Tôi muốn rằng nếu những div bên trong là đủ lớn để được cung cấp trong 50 chiều cao hơn thanh cuộn nên đến trong divs hàng tương ứng của họ nhưng row1 và row2 nên vẫn còn chiếm 50% của màn hình chỉ.

Nội dung HTML của tôi là:

<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> 

Snippet của css:

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

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

Làm thế nào tôi có thể chắc chắn rằng nếu nội dung của thẻ tăng bên trong sau đó cũng chèo-divs dính vào 50 của họ% chiều cao được chỉ định.

Cảm ơn.

Answer 1

Bạn cần phải chắc chắn rằng các nút cha mẹ trên hàng-divs đang chiếm 100% bản thân:

html, body{ 
    height: 100%; 
} 

(chiều cao Tỷ lệ thừa hưởng chiều cao cơ sở của họ từ cha mẹ của họ.)