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でこれをやりたいので、すべてのブラウザで互換性があります。私article.layer sはdisplay:tableに設定されているとして、純粋なCSSでこれに方法がないようにそれは私のbodyとhtmlが100％に設定されているように、すべての記事は、現在のビューポートの高さが100％

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

...らしいです高さも同様です。

今すぐsection.catは、ほとんどのブラウザで動作するが、Safari 5.0では動作しないdisplay:inlineに設定されています。

section.cat { 
    display:inline; 
} 

したがって、私はjQueryを使ってこれを行うとsection.cat内のそれぞれの子の高さを取得し、この値にその高さを設定します。さもなければ、section.catの高さは0であり、上記のようにサファリ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); 
});