5

I have a number of containers (class="sidebox") with child divs each with varying amounts of content.

On some occasions I want the child divs to each be 100% height of the parent div, sometimes to add a vertical separator style.

To do this I add a class of cfull to the child divs and vcon to the container with the class of 'sidebox'.

Then call a jquery function:

var y = $('.cfull').parent('div.vcon').height();
    $(".cfull").height(y) ;

This perfectly when there is only one instance on and sets it's children div height to the height of the sidebox.

If I add a second sidebox vcon in the html and give one of it's child divs additional content. The second sidebox child divs get the height set from the first instance of the sidebox

How do I set the heights for each set of child divs in a class="sidebox vcon" container div?

I hope that makes sense.

Here's my working example so far, you'll see the second sidebox children have the style="height:#px" from the first sidebox

http://bit.ly/jqueryheightissue

3 Answers 3

6

What you're doing is called implicit iteration. When you do this:

$('.cfull').height(y);

... what you're doing is setting all .cfull elements to only one value of height (the current value of y).

You want to iterate through each element explicitly, maybe by using .each().

$('.cfull').each(function () {

    var self = $(this),
        container = self.parent('div.vcon');

    self.height(container.height());

});

However, you should be able to do what you're trying to achieve using just plain CSS. Have you tried doing something like this?

.cfull {
    height : 100%;
}
1
  • 1
    Thanks very much, that's worled perfectly
    – Matt
    Feb 7, 2013 at 13:51
3

You need to loop through all of the elements with a class of .cfull. Live example: http://jsfiddle.net/QpEgX/5/

$('.cfull').each(function() {
    var y = $(this).parent('div.vcon').height();
    $(this).height(y) ;
});
5
  • While I see @Richard got a correct answer down first, I am not sure why I got voted down for an answer that works perfectly well.
    – tw16
    Feb 7, 2013 at 13:56
  • Perhaps because there's already the same solution :) If it's about points I'll give you a vote. What is right is right I don't care it's the same :)
    – kidwon
    Feb 7, 2013 at 14:01
  • Might have been because of an edit. Maybe a prior solution you submitted was wrong? Feb 7, 2013 at 14:06
  • Perhaps, can't help you with that. I don't like down-votes, people should be more careful with them
    – kidwon
    Feb 7, 2013 at 14:13
  • ... doubling back, I realized that I was the one who downvoted. Sorry mate. I remember an earlier version being incorrect. Let me see if I can correct that now that this is rectified. Feb 7, 2013 at 14:16
0
var height = 0;
$('.cfull').each(function () {
  height = $(this).parent('div.vcon').height();
  $(this).height(height);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.