铺满屏幕的布局方法

铺满屏幕的布局方法

我们可以通过设置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不会生效.

参考：剖析height百分比和min-height百分比