gpt4 book ai didi

javascript - 制作一个 div 以填充剩余的可用屏幕高度

转载 作者:行者123 更新时间:2023-11-27 23:46:30 25 4
gpt4 key购买 nike

我有这样的结构:

enter image description here

我想使 content2 的最小高度 = 屏幕高度 - 其他 div 的高度

使用下面的 HTML/CSS,结果大于屏幕高度。那么我怎样才能做我想做的事呢?版权部分(页脚)在 content2 中,所以我想让 content2 的高度在屏幕上准确。

body {
margin:0;
border:0;
background-color:#24373B;
color: #fff;
}
#headerBG {
min-width:980px;
background-color:#000;
}
#header {
width:980px;
}
#content1 {
width:980px;
}
#content2 {
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height:100hv;
}
<body>
<div id="headerBG">
<div id="header">header</div>
</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
</body>

最佳答案

您使用 100hv 而不是 100vh 作为最小高度。固定:

#content2{
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height: calc(100vh - 50px);
}

但在使用 vw 或 vh 之前,您应该定义:

html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}

关于javascript - 制作一个 div 以填充剩余的可用屏幕高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29640043/

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