css - CSS 平均分布高度和填充屏幕

Question

是否可以让五个 CSS 元素填满整个屏幕（彼此重叠），从而使屏幕的高度均匀分布？就像在这个草图中：http: //imgur.com/iI6sQjM

Answer 1

只需将html和body元素的高度设置为100%，然后将每个 div 的高度设置为20%

html, body { height: 100% }
div { 
  height: 20%; 
  border: 1px #d2d2d2 solid; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

示例 JsBin：http: //jsbin.com/owocog/1/edit

作为替代方案，在支持新视口单元的现代浏览器vh（甚至 IE9）上，您可以简单地编写

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 20vh;  
}

示例 JsBin：http: //jsbin.com/ufedat/1/edit

Answer 2

是的，只需创建一个填充整个页面的容器，即为height: 100%;每个包含的元素添加 20% 的高度。

这里的例子：http: //jsfiddle.net/M3uqn/