绝对定位的div不会在高度上扩展

Question

我不确定为什么绝对位置div不会在高度上扩展（div.class1）

小提琴：http://jsfiddle.net/z9Unk/209/

HTML

<div class="container">
  <div class="content">
    <div class="space">
    </div>
    <div class="class1 hz">
      <div class="class2 class3">
        item2
      </div>
      <div class="class2 class3">
        item2
      </div>
    </div>
  </div>
</div>

CSS

.container {
  position:relative;
  height: 100%;
  width:100%;
}
.space {
  margin-top:80px;
}

.content {
  height:100%;
  border:1px solid transparent;
}

.hz {
  top:20%;
  margin:0 auto;
  left:0px;
  right:0px;
  display:inline-block;
}


.class1 {
  position: absolute;
  top:160px;
  width: 985px;
  height:100%;
  border:1px solid blue;
}

.class2 {
  width : 275px;
  height : 250px;
  margin-right:20px;
   border:1px solid red;
}

.class3 {
  width : 325px;
  height: 280px;
  margin-right:3px;
  display:inline-block;
}

请帮我解决这个问题。

Answer 1

将display:table;添加到.class 1

.class1 {
  position: absolute;
  display:table;
  top:160px;
  width: 985px;
  height:100%;
  border:1px solid blue;
}

更新小提琴：http://jsfiddle.net/z9Unk/213/

Answer 2

将位置更改为相对位置，它将适合高度100％

jsFiddle：http://jsfiddle.net/AhmedAlaaElDin/z9Unk/212/

.class1 {
  position: relative;
  top:160px;
  width: 985px;
  height:100%;
  border:2px solid blue;
}