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的{{3}}设置从none（这是一个非法值）更改为scroll。

overflow

这样容器本身（.mainframe）不会拉伸，但有自己的滚动条。

您也可以设置jsFiddle Demo，仅允许垂直滚动条。

Div不会伸展到窗户高度

1 个答案: