DIV 设置满屏高(HTML中让块级元素占满全屏高度)
div如何全屏高
·
解决思路
对目标块级元素的所有父元素全部设置高度。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>DIV设置满屏高(HTML中让块级元素占满全屏高度)</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
.parent {
height: 100%;
}
.children {
width: 200px;
height: 100%;
background-color: #42b8f1;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">目标块级元素</div>
</div>
</body>
</html>
解读
元素层级结构如下:
html -> body -> .parent div -> .children div
.children div是要占满全屏的目标块级元素, 所以要对它自身和所有的父级元素设置 height:100%;
防止出现Y轴滚动条
body 中设置的 margin:0 就是为了防止出现Y轴滚动条。
body 标签设置 height:100% 后的 实际高度 = (浏览器可视窗口高度 + 外边距高度), 而body默认是有外边距的, 这样会撑出滚动条,
所以要把body元素的默认外边去去掉。或者使用 overflow:hidden; 也可以实现同样的效果
更多推荐
已为社区贡献2条内容
所有评论(0)