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高度，问题我面临的是每个容器div都有不同的高度，我无法找到如何设置每个叠加div高度等于到它的父容器div高度。

我使用以下jquery代码为每个

设置叠加高度

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

以上代码仅获取第一个容器的高度，并将所有重叠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

你可以这样做：

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

Answer 2

选择器$(".container").height()返回容器列表，并从列表中获取第一个容器的高度。因此，当您设置$(".overlay").height($(".container").height())时，将所有子元素设置为第一个容器的高度。

您需要遍历所有子容器，并将其高度设置为与其容器相对应。它可以使用代表当前子元素的$(this)关键字来实现，并通过使用.parent()来返回其各自的容器父元素。

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

Answer 3

在样式表中将overlay高度设置为100％：

.overlay {
  height: 100%;
}

如何设置动态高度jQuery

3 个答案: