解决height：100%；无效问题
首先，我们得知道百分号单位的使用，它是相对于父元素的百分之（%）多少，所以当我们要给子元素设置高度且像素单位是%时，要考虑到父元素是否有高度，如果没有则失效。
示例：body中设置子元素div的height：100% 有时候我们会遗忘掉body的父元素html，如果只是body设置了高度，body的子元素也是不会生效的，所以body和html标签都得设置高度。这样我们就能达到效果了，如下图所示。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
}
div{
height: 100%;
font-size: 40px;
text-align: center;
background-color: forestgreen;
}
</style>
</head>
<body>
<div>我是子元素div</div>
</body>
</html>
小细节
如果不设置 overflow: hidden；会产生上下滚轮。
