동적 높이 jQuery를 설정하는 방법

Question

동일한 학급 이름을 가진 여러 개의 상위 div가 있고, 하나는 parent div이고 다른 하나는 child 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의 높이를 동일 설정하려면, 내가 직면하고있어 문제는 모든 컨테이너 사업부가 서로 다른 높이를 가지고 있다는 것입니다 그리고 난 각 오버레이 DIV의 높이가 동일 설정하는 방법을 찾을 수 있어요 부모 컨테이너 div 높이입니다.

내가 코드 위 각

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

에 대한 오버레이 높이를 설정하기 위해 다음과 같은 jQuery 코드를 사용하고 있습니다 만, 제 1 용기의 높이를 얻고 설정된 모든 오버레이 먼저 컨테이너에 높이 div를. 나는 모든 오버레이 div에서 150px 높이를 설정하고 부모 컨테이너 div에 오버레이 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%; 
}