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做这个，所以我在所有浏览器中兼容。由于我的article.layer设置为display:table ...

，因此纯css似乎没有办法解决这个问题

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

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

现在section.cat设置为display:inline，适用于大多数浏览器，但不适用于Safari 5.0。

section.cat {
    display:inline;
}

因此，我想用jquery做这个，并在section.cat内获取每个孩子的高度，并将其高度设置为此值。否则section.cat s的高度为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);
});

jQuery：将<section>的高度设置为其所有子节点的高度？</section>

1 个答案: