1. html,body{height:100%}

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

2. 定位position

div{height:100%;position:absolute}

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

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

代码

HTML：

<div class="box">

  <a href="javascript:" class="prev" title="上一张">上一张</a>

  <a href="javascript:" class="next" title="下一张">下一张</a>

  <img src="/images/common/l/1.jpg">

</div>

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;

}