gpt4 book ai didi

html - Div 不会拉伸(stretch)到窗口高度

转载 作者:搜寻专家 更新时间:2023-10-31 08:16:39 25 4
gpt4 key购买 nike

我对必须保持窗口高度 100% 的 div 有疑问。一旦我在其中放置另一个超过屏幕尺寸的 div,父 div 就不会在其子元素之后拉伸(stretch)。这是我的代码:

<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/

最佳答案

更改 overflow .mainframe 的设置从 none(这是一个非法值)到 scroll

jsFiddle Demo

这样容器本身 (.mainframe) 就不会拉伸(stretch),而是有自己的滚动条。

你也可以设置overflow-y相反,只允许垂直滚动条。

关于html - Div 不会拉伸(stretch)到窗口高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33273916/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com