Установка высоты родителя в зависимости от высоты ребенка

Question

У меня есть слайдер с несколькими слайдами; каждый слайд имеет разную высоту.

Он работает следующим образом:

первый слайд

<holder> 
<slide - display: block> 
<slide - display: none> 
<slide - display: none> 
</holder> 

второй слайд

<holder> 
<slide - display: none> 
<slide - display: block> 
<slide - display: none> 
</holder> 

т.д.

горок имеют position: absolute (Это должно быть так).

Таким образом, проблема заключается в следующем: как динамически изменять высоту holder, чтобы увидеть весь контент каждого слайда?

Теперь у меня есть:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".holder").height($(".slide").height()); 
    }); 
</script> 

<script type="text/javascript"> 
    $(window).resize(function() { 
    $(".holder").height($(".slide").height()); 
    }); 
</script> 

но он использует только высоту первого слайда, так что другие слайды отрезаны.

Пожалуйста, используйте javascript, чтобы помочь в решении этой проблемы.

Answer 1

Вы можете перебирать их все, чтобы получить высоту самого высокого уровня .slide.

function updateSlideHolderSize() { 
    var max = 0; 
    $(".slide").each(function() { 
     max = Math.max(max, $(this).height()); 
    }); 
    $(".holder").height(max); 
} 

---

Так он будет идти в ваше приложение, как это:

<script type="text/javascript"> 
$(document).ready(updateSlideHolderSize); 
$(window).resize(updateSlideHolderSize); 

function updateSlideHolderSize() { 
    var max = 0; 
    $(".slide").each(function() { 
     max = Math.max(max, $(this).height()); 
    }); 
    $(".holder").height(max); 
} 
</script>