Teilen html Seite in zwei Zeilen von 50% Höhe

Question

Ich möchte HTML-Seite in zwei Zeilen von je 50% geteilt haben. Dafür habe ich zwei divs gemacht, die als row1 und row2 gekennzeichnet sind und ihre Höhe einstellen: 50% in css. Row1 hat 3 weitere divs und Zeile 2 hat 2 divs mehr. Ich will das, wenn diese inneren divs groß genug sind, um in 50 Höhe untergebracht zu werden, sollten Scrollbalken in ihren jeweiligen Zeilen divs kommen, aber row1 und row2 sollten bleiben, um nur 50% des Bildschirms zu belegen.

Inhalt meiner HTML ist:

<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 von CSS:

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

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

Wie kann ich sicherstellen, dass, wenn der Inhalt der inneren Tag Anstieg dann auch zeilen divs auf ihre 50% halten zugewiesene Höhe.

Danke.

Answer 1

Sie müssen sicherstellen, dass der übergeordnete Knoten über die Zeilen-divs nimmt bis zu 100% selbst:

html, body{ 
    height: 100%; 
} 

(Percentage Höhen erben ihre Basishöhe von ihren Eltern.)