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视口单元的modern browsers（甚至是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/

CSS均匀分布高度和填充屏幕

2 个答案: