html - 绝对定位的 div 高度不扩展

Question

我不确定为什么绝对位置 div 的高度没有扩展( div.class1 )

fiddle :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; 添加到 .class1

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

更新的 fiddle :http://jsfiddle.net/z9Unk/213/