为什么CSS设置div的height:100%不管用
原文链接：https://cloud.tencent.com/developer/article/1399131有时我们会困惑为什么设置div的height:100%;没有效果，如下所示：要解决这个问题，先的知道设置height:100%的原理，当你让一个元素的高度设置为百分比高度时，是相对于父元素的高度根据百分比来计算高度。 所以当父元素没有高度时，height:100%也就没有高度值，所以我们
原文链接：https://cloud.tencent.com/developer/article/1399131
有时我们会困惑为什么设置div的height:100%;没有效果，如下所示：
要解决这个问题，先的知道设置height:100%的原理，当你让一个元素的高度设置为百分比高度时，是相对于父元素的高度根据百分比来计算高度。 所以当父元素没有高度时，height:100%也就没有高度值，所以我们来设置body高度。
可见还是没有效果，原因跟上一个一样，其父元素也没有高度，所以我们来设置html的高度。
可见产生了我们想要的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试height100%</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
height: 100%;
}
.wqh{
height: 100%;
background-color: royalblue;
}
</style>
<body>
<div class="wqh"></div>
</body>
</html>
进阶
html 的父元素可以理解成window，浏览器会将html填充完一个浏览器窗口。
设置html的height为具体的像素值，当其值大于浏览器窗口时，浏览器出现滚动条，当其值小于浏览器窗口时，同样会将html填充完整个浏览器窗口（可以设置背景测试）。
设置html的height为百分比时，当其值大于100%出现滚动条，当小于100%时同样会将html填充完整个浏览器窗口（可以设置背景测试）。
但是子html的子元素的高度设置成百分比时，会按照html设置的高度值计算比例。（如下所示，html高度为1000px；所以body的高度为500px）。
对于body的设置的高度小于浏览器窗口时，同样会填充满整个浏览器窗口（可以设置背景测试），但是其子元素的高度设置成百分比时，会按照body设置的高度值来计算比例。
总结：height:100%是依据父元素来设置的，在body中的div的父元素是body，body并没有设置height，body的父元素是html，html也没有设置height，所以若想使div设置的height：100%占据整个浏览器窗口就要设置body和html的height为100%
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)