Question

i have this …

<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>

And I want to set the height of each section.cat to the height of all its children.
I wanna do this with jquery so I’m compatible in all browsers. It seems like there is no way to this with pure css as my article.layers are set to display:table…

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

So all articles are 100% the height of the current viewport as my body and html are set to 100% height as well.

Right now section.cat is set to display:inline which works in most browsers but doesn’t in Safari 5.0.

section.cat {
    display:inline;
}

So therefore I want to do this with jquery and get the height of each child inside section.cat and set its height to this value. Otherwise the height of section.cats is 0 and as mentioned above Safari 5.0 somehow can’t deal with the display:inline value.

Thank you!

Answer 1

I would suggest you to find css equivalent for to to solve but still if you want jQuery solution then here it is.

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