原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因
<!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div>
解决方法一：设置父元素高度
html, body { padding: 0; margin: 0; height: 100%; }
备注：vue或者react等可以通过开发者模式查看当前父元素是谁
解决方法二：不用设置父元素高度，通过设置定位（fixed或absolute）解决
.box { /* position: fixed; */ position: absolute; top: 0; left: 0; }
在使用height: 100%;时需要注意的一些事项
- margin 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
- 如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。
