Как установить динамическую высоту jQuery

Question

У меня есть несколько родительских div с теми же именами классов, один из которых является родительским div, а другой - дочерним div.

<div class="container" style="height:150px; width:50%;"> 
    <div class="overlay"></div> 
</div> 

<div class="container" style="height:250px; width:50%;"> 
    <div class="overlay"></div> 
</div> 


<div class="container" style="height:350px; width:50%;"> 
    <div class="overlay"></div> 
</div> 

Я хочу, чтобы установить высоту наложения ДИВ равна высоту контейнер сНа, проблему я столкнулся в том, что каждый контейнер DIV имеет разную высоту, и я не в состоянии выяснить, как установить каждую высоту наложения ДИВ равна к его родительскому контейнеру div height.

Я использую следующий код JQuery для установки наложения высоты для каждого

$(".container").each(function(){ 
    $(".overlay").height($(".container").height()); 
}); 

выше кода получить высоту только первого контейнер и установить все наложения DIVS высоты первого контейнер. Я имею в виду, что он установил высоту: 150 пикселей во всех оверлейных div, и я хочу установить верхнюю высоту divay равным ее родительскому контейнеру div.

<div class="container" style="height:150px; width:50%;"> 
    <div class="overlay" style="height:150px;"></div> 
</div> 

<div class="container" style="height:250px; width:50%;"> 
    <div class="overlay" style="height:150px;"></div> 
</div> 


<div class="container" style="height:350px; width:50%;"> 
    <div class="overlay" style="height:150px;"></div> 
</div> 

Answer 1

селектор $(".container").height() возвращает список контейнеров и принимает высоту первого из списка.
поэтому, когда вы установили $(".overlay").height($(".container").height()), вы установите все дочерние элементы на высоту первого контейнера.

Вам необходимо пройти через все дочерние контейнеры и установить их высоту, соответствующую их контейнеру. это может быть достигнуто с помощью ключевого слова $(this), который представляет текущий дочерний элемент, и принимая его .parent(), который вернет соответствующий родительский элемент контейнера.

$(".overlay").each(function(){ 
    $(this).height($(this).parent().height()); 
}); 

Answer 2

Вы можете сделать это следующим образом:

$(".overlay").each(function(){ 
    $(this).height($(this).parent().height()); 
}); 

Answer 3

Набор overlay высота до 100% в таблице стилей:

.overlay { 
    height: 100%; 
}