css - Div CSS 溢出将后续的 div 推低

Question

我想让div1占据屏幕高度的80%，div2占据屏幕高度的20%。如果 div1 虽然有太多内容并溢出，那么 div2 应该被推到它下面而不是它上面。但出于某种原因，overflow:visible 不起作用，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 Demo