html - 绝对定位的 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;到 .class1

.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;
}