Div CSS overflow push subsequent div lower

Question

I am trying to make div1 occupy 80% of the screen height, and div2 occupy 20% of the screen height. If div1 though has too much content and overflows, then div2 should be pushed under it and not on top of it. For some reason though, the overflow:visible is not working, div2 remains on top of div1, with div1 content underneath it. Thanks.

<div style="width:100%; height:80%; overflow:visible;">
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
<div style="width:100%; height:20%;" class="footerbar">
    <asp:PlaceHolder ID="plFooter" runat="server"></asp:PlaceHolder>
</div>

Answer 1

If you want div1 to be on top of div2, give div1 a higher z-index than div2.

Answer 2

You may use positioning and minimum height in the following way:

<div class="container">
    <div class="body">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
    </div>
    <div style="" class="footerbar">
        <asp:PlaceHolder ID="plFooter" runat="server" />
    </div>
</div>

CSS:

.container{
    background-color: green; 
    min-height: 300px; 
    position:relative;
}
.body{
    width:100%; 
    min-height:80%; 
    background-color:green;
}
.footerbar{
    width:100%; 
    min-height:20%; 
    background-color: yellow; 
    position: absolute; 
    bottom: 0;
}

JSFiddle Demo