Div CSS溢出push下一个Div

Question

我试图使div1占据屏幕高度的80%，div2占据屏幕高度的20%。如果div1虽然有太多的内容和溢出，那么div2应该被推到它的下面，而不是在上面。由于某种原因，溢出:可见不工作，div2仍然在div1的顶部，与div1的内容下面。谢谢。

<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

您可以通过以下方式使用定位和最小高度:

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

Answer 2

如果你想让div1位于div2的顶部，给div1一个比div2更高的z-index