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 s установлены на display:table…

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);
});