절대 위치 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; 
} 

이 문제를 해결하는 데 도움을주세요. 상대와는 높이 100 % 맞는

jsFiddle에

Answer 1

변경 위치 : http://jsfiddle.net/AhmedAlaaElDin/z9Unk/212/

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

Answer 2

이

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

업데이트 바이올린을 .class1하는 display:table;를 추가 http://jsfiddle.net/z9Unk/213/