1、问题的发现：div设置height高度为100%却未生效
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.contentDiv {
width: 100%;
height: 100%;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="contentDiv"></div>
</body>查看上面的代码，结构很简单，一个div，宽度和高度都设置100%，背景颜色设置了#ccc。
此时想象一下在浏览器中应该显示一个背景颜色为灰色的全屏的div，但是，结果并不是这样，反而，此时div的高度是0！！！
2、问题的解决：
需要给html和body设置高度为100%，此时div设置高度100%才生效，代码如下：
<style>
html, body {
width: 100%;
height: 100%;
}
......
</style>
3、问题的原因：
给div设置高度为100%时，是相对于父节点（此时div的父节点是body）设置的，如果此时只设置body的高度为100%，结果发现body高度还是0！！！所以此时再要找到body的父节点（也就是html），也给它设置高度即可解决这个问题。
扫一扫
1051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
