CODEWITHSUNDEEP
jquerygetheight
torm
torm

Reputation: 5

How to add specific height of an element to another

I've got html code like that:

<section>
   <div>
   </div>
</section>
<section>
   <div>
   </div>
<section>

I don't have specific height of any of element. And what i wanna to do is to get the section height and give it to the inner div height. How can i do this with jQuery?

I've already tryed something like this:

    $(document).ready(function() {
    var contentHeight = $('.content').parent().height();
    $(".content").height(contentHeight);
});

$(window).resize(function() {
    var contentHeight = $('.content').parent().height();
    $(".content").height(contentHeight);
});

but it only takes the height of a first section and then apply it to all of the inner divs.

Upvotes: 0

Views: 47

Answers (1)

Ronen Cypis
Ronen Cypis

Reputation: 21470

In your $(window).resize section, replace your code with this:

$(window).resize(function() {
    $(".content").each(function(){
      $(this).css('height', $(this).parent().height()+'px');
    });
});

The reason that only the first ".content" is affected, is that your $('.content') returns an array of matching elements, but the .height() part only returns the first element of that array. The solution is to iterate through the entire set of ".content" elements using .each(function(){...})

Upvotes: 1

Related Questions