javascript - jQuery:将 <section> 的高度设置为其所有子项的高度？

Question

我有这个……

<section class="cat">
   <article class="layer"></article>
   <article class="layer"></article>
   <article class="layer"></article>
   <article class="layer"></article>
</section>

<section class="cat">
   <article class="layer"></article>
   <article class="layer"></article>
   <article class="layer"></article>
</section>

我想将每个 section.cat 的高度设置为其所有子项的高度。 我想用 jquery 做到这一点，所以我在所有浏览器中都兼容。似乎没有办法使用纯 css，因为我的 article.layer 设置为 display:table ...

article.layer {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

因此所有文章都是当前视口(viewport)的 100% 高度，因为我的 body 和 html 也设置为 100% 高度。

现在 section.cat 被设置为 display:inline ，它在大多数浏览器中有效，但在 Safari 5.0 中无效。

section.cat {
    display:inline;
}

因此我想用 jquery 来做到这一点并获取 section.cat 中每个 child 的高度并将其高度设置为此值。否则 section.cat 的高度为 0，如上所述 Safari 5.0 无法处理 display:inline 值。

谢谢!

Answer 1

我建议您找到等效的 css 来解决，但如果您想要 jQuery 解决方案，那么就在这里。

var totalHeight;
$(".cat").each(functon(){
   totalHeight = 0;
   $(this).children(".layer").each(function(){
      totalHeight += $(this).height();
   })
   $(this).height(totalHeight);
});