Each div get height of parent - jQuery approach

Question

I have this structure:

<div class="container" style="height:(variable height)">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container" style="height:(variable height)">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container" style="height:(variable height)">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

So I need each .box gets the height of the parent .container which has different heights from the other and it varies.

I need ONLY jQuery approach, no CSS cause I don't want to use absolute position, table-cell or whatever to do that.

Thanks!

Answer 1

You can use the function overload of .height

$('.box').height(function(){
    return $(this).parent().height();
});

Answer 2

If you really must use jQuery:

$('.container').each(function(){
    $(this).children().height($(this).height);
});

JS Fiddle demo .

It's worth noting, though, that if height is set on the .container elements then you could simply assign:

.box {
    height: 100%;
}

JS Fiddle demo .

No special position , or display , properties are required.

Incidentally, for a plain JavaScript sollution:

[].forEach.call(document.querySelectorAll('.container'), function (c) {
    [].forEach.call(c.children, function (b) {
        b.style.height = c.style.height;
    });
});

JS Fiddle demo .

References:

• JavaScript:
  • Array.prototype.forEach() .
  • Function.prototype.call() .
  • ParentNode.children .
• jQuery:
  • children() .
  • each() .
  • height() .

Answer 3

$(function(){
  $('.container').each(function(i,e){
    $(this).find('.box').css('height',$(this).height())
  });
});