HTML 상대 위치 및 높이에 문제가 있습니다.

Question

나는이 HTML 콘텐츠를 필요로하는 이미지 페이더 자바 스크립트를 만들었다 :

<div id="finder" class="clearfix"> 
    <div class="clearfix"> 
    <figure> 
     <h1>Asd</h1> 
     <h2>Asd</h2> 
     <h3>Asd</h3> 
     <img src="images/sample-image.jpg" /> 
    </figure> 
    <figure> 
     <h1>Asd2</h1> 
     <h2>Asd2</h2> 
     <h3>Asd2</h3> 
     <img src="images/sample-image-2.jpg" /> 
    </figure> 
    <figure> 
     <h1>Asd3</h1> 
     <h2>Asd3</h2> 
     <h3>Asd3</h3> 
     <img src="images/sample-image-3.jpg" /> 
    </figure> 
    <p>some text</p>   
    </div> 
</div> 

CSS의 : 나는에 자동 높이 현재 #finder div figure '에 따라 #finder div 요소를 싶습니다

#finder div {margin: 0; padding: 0; position: relative;} 
#finder figure {position: absolute; margin: 0;} 
#finder figure img {width: 980px;} 
#finder figure h1 {position: absolute;} 
#finder figure h2 {position: absolute;} 
#finder figure h3 {position: absolute;} 

자바 스크립트없이 높이. 가능한가? 내용은 유동적이어서 이미지는 크기 조정 가능하므로 자바 스크립트없이이 작업을 수행하려는 이유가 있습니다.

나는 다른 이미지와 같은 높이가 자리 표시 자 이미지로 문제를 해결하지만, 관련의 우아한 방법 :

감사

Answer 1

#finder, 
#finder div { overflow: hidden; } 

이 방법을 생각하지 않는다 divs는 자동으로 #finder 및 #finder div 내부의 가장 높은 요소에서 높이를 가져옵니다. 내부 JS 코드로 jsFiddle 많은 도움이 될 것입니다.