Dividere la pagina html in due file al 50% di altezza

Question

Vorrei avere una pagina html divisa in due righe del 50% ciascuna. Per questo ho realizzato due div che si presentano come row1 e row2 e impostano la loro altezza: 50% in css. Row1 ha altri 3 div in esso e la riga 2 ha altri 2 div in esso. Voglio che se questi div interni sono abbastanza grandi da essere sistemati in altezza 50 rispetto alle barre di scorrimento dovrebbero venire nelle loro rispettive div di fila ma row1 e row2 dovrebbero rimanere per occupare solo il 50% dello schermo.

contenuto del mio HTML è:

<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 di css:

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

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

Come posso fare in modo che se il contenuto di aumento tag interno poi anche row-div attaccano al loro 50% altezza assegnata.

Grazie.

Answer 1

È necessario fare in modo che i nodi principali sopra la riga-div stanno prendendo 100% stessi:

html, body{ 
    height: 100%; 
} 

(altezze percentuali ereditano la loro altezza di base dal loro genitore.)