Div不會伸展到窗戶高度

Question

我有一個div的問題，必須保持100％的窗口高度。 一旦我在其中放置了超出屏幕大小的另一個div，父div就不會在其子節點之后伸展。 這是我的代碼：

<html>
    <body>
        <div class="mainframe">
            <div class="screencontainer">
                <div class="mainscreen"></div>
            </div>
        </div>
    </body>
</html>

這是css：

html,body {
    background:white;
    height:100%;
    margin: 0px 0px;
    background-attachment: fixed;
}


.mainframe{
    background:green;   
    width:100%;
    position:absolute;
    display:block;
    margin:0 auto;
    height:100%;
    overflow:none;

}

.screencontainer{
    background:red;
    position:relative;
    display:block;
    overflow:none;
    width:60%;
    left:250px; 
}

.mainscreen{
    position:absolute;
    width:100%;
    height:1000px;
    top:100px;
    left:0px;
    background: radial-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.5));
}

因此，只有當我刪除.screencontainer及其所有內容時，.mainframe才是窗口大小的100％。 但是一旦我擁有它，因為它的子.mainscreen具有1000px高度，主頁在頁面中間斷開。

這是jsfiddle： https ：//jsfiddle.net/u4oL7t80/

Answer 1

將.mainframe的overflow設置從none （這是一個非法值）更改為scroll 。

jsFiddle演示

這樣容器本身（ .mainframe ）不會拉伸，但有自己的滾動條。

您也可以設置overflow-y ，僅允許垂直滾動條。

Div不會伸展到窗戶高度

問題描述

1 個解決方案

解決方案1
4 已采納 2015-10-22 05:32:13

Div不會伸展到窗戶高度

問題描述

1 個解決方案

解決方案1 4 已采納 2015-10-22 05:32:13

解決方案1
4 已采納 2015-10-22 05:32:13