Проблемы относительного положения и высоты HTML.

Question

Я сделал javascript для фейдера изображений, который нуждается в таком 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 {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;}

Я хочу автоматически увеличить #finder divэлемент, основанный на текущей высоте #finder div figure без javascript.Является ли это возможным?Содержимое изменчиво, поэтому размер изображения можно изменять, вот почему я хочу сделать это без JavaScript.

Я решил проблему с изображением-заполнителем, которое имеет ту же высоту, что и другие изображения, но я неЯ думаю, это элегантный метод:)

Спасибо

Answer 1

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

Таким образом, соответствующие div автоматически получат высоту от самого высокого элемента внутри #finder и #finder div. jsFiddle с вашим JS-кодом очень помог бы.