常用布局总结

1.占据视口100%

html,body{
  height:100%;
}

2.body没被撑开，body内的容器占视口100%，被撑开就显示撑开的高度。

/*这种方法使得html和body都是视口的高度*/
html,body{
  height: 100%;
}
.wrapper{
  min-height: 100%;
}

/*这种方法使得html是视口的高度，而body能够被撑开*/
html{
  height: 100%;
}
.wrapper{
  min-height: 100%;
}

3.页面没被撑开，footer在窗口底部 页面被撑开，footer在页面底部

/*body能够被撑开*/
html{height:100%;}
body{min-height:100%;position:relative;}
.footer-area{
   width:100%;
   position: absolute;
   bottom: 0;
}

4.不管页面多长都要遮盖

html{height:100%;}
body{min-height:100%;position:relative;}
.mask{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

5.居于视口正中间的对话框

.confirm{
  position: fixed;
  z-index: 999;
  height: 100px;
  width: 100px;
  background-color: green;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}