本问题已经有最佳答案,请猛点这里访问。
我在它下面有一个头分区和一个分区。我需要在头DIV下面的DIV根据浏览器窗口大小的高度进行调整。
在CSS中,当我添加height:100%时,它会在页面的侧面创建一个滚动条。当我调整宽度的百分比时,页面底部的间距会不断变化,因为它是用百分比完成的。
我希望标题下面的DIV总是随窗口的高度而调整,底部没有间距。
我该怎么做?
这是小提琴
JS小提琴我不知道为什么,但在jfiddle中底部的DIV没有延伸高度:100%
代码如下:HTML
Header
Bottom Div
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
尝试使用类似于此代码的内容
HTML:
Header
Bottom Div
CSS:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}
正是我要找的!非常感谢。
您有几个选项来实现您想要的布局。
从这个类似的问题中,有很多答案可以解决您的问题:使一个DIV填充剩余屏幕空间的高度
但是,我的解决方案是:只需稍微更改您的CSS
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
框大小调整将阻止填充顶部和边框将尺寸推到浏览器窗口之外。身体,HTML高度:100%,需要允许其他项目100%的高度(为什么你的小提琴不工作)。
在样式表中试试这个
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
参考链接/questions/1622027/percentage-height-html-5-css
CSS允许您进行一些基本的数学运算,因此以下内容将帮助您:
假设您的收割台固定高度为60px:
.left {
height: calc(100% - 60px);
}
编辑:在计算时,您可能还需要考虑一些额外的填充和边框。虽然我不太喜欢这样的硬编码值。
这对我来说是一个可能的解决方案,但并没有完全按照我想要的方式来解决,但非常感谢你的帮助!
如果觉得《html页面div高度相减 关于html:两个div底部div到高度调整与浏览器窗口》对你有帮助,请点赞、收藏,并留下你的观点哦!