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 Demo

Answer 2

如果你想让div1在div2之上，给div1一个比div2更高的z-index。

Div CSS溢出推后续div降低

2 个答案: