div满屏显示

1. html,body{height:100%}

非定位元素的宽高百分比计算不会将padding计算在内

2. 定位position

div{height:100%;position:absolute}

第二种方法支持隐式高度，脱离文档流

实例：图片左右半区分别点击上一张和下一张

代码

HTML：

  上一张

  下一张

 

CSS：

.box {

  display: inline-block;

  position: relative;

}

.prev,

.next {

  width: 50%; height: 100%;

  position: absolute;

  top: 0;

  opacity: .5;

}

.prev {

  left: 0;

  background-color: #cd0000;

}

.next {

  right: 0;

  background-color: #34538b;

}