铺满屏幕的布局方法
铺满屏幕的布局方法
我们可以通过设置html和body的高度来填满整个浏览器屏幕的高度:
html { height: 100%; } body { min-height: 100%; }
如果我们将html和body都设置为height: 100%时,body的高度仅会被设置为浏览器屏幕的高度.当body里的内容高度大于浏览器屏幕高度时,会因为默认的设置overflow:visible使得高出的部分被隐藏起来.
如果我们将html和body都设置为min-height: 100%时,body元素不会扩展到浏览器屏幕的高度,因为html设置为百分比值的height不会生效(因为html没有父元素了,也就不会符合父元素有明确的高度值的条件),body元素也就因为html没有一个明确的高度使得min-height不会生效.