原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置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;
}