Divide html page into two rows of 50% height

Question

I wish to have html page divided into two rows of 50% each. For this I have made two divs featuring as row1 and row2 and set their height:50% in css. Row1 has 3 more divs in it and row 2 has 2 more divs in it. I want that if these inner divs are large enough to be accommodated in 50 height than scrollbars should come in their respective row divs but row1 and row2 should remain to occupy 50% of the screen only.

Content of my HTML is:

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

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

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

How can I make sure that if content of inner tag increase then also row-divs stick to their 50% assigned height.

Thanks.

Answer 1

You need to make sure that the parent nodes above the row-divs are taking up 100% themselves:

html, body{
    height: 100%;
}

(Percentage heights inherit their base height from their parent.)