height() not returning correct height on element

Question

I am trying to fix overflowing floating content by adjusting the box height to the overflowed content height but it doesn't seem to be doing the trick.

            if ( $('.content-right').outerHeight() > $('.content-right').parent().parent().height() ) {
                $('.content-right').parent().parent().height($('.content-right').outerHeight(true));
            }
            console.log('Box Height: ' + $('.content-right').parent().parent().height());
            console.log('Content Height: ' + $('.content-right').height() );

This will output

Box Height: 599
Content Height: 594 

Which is incorrect as the div is clearly a lot larger in the example below. Any ideas?

Problem area in image form: http://prntscr.com/4p1obb

Answer 1

There is a bug jQuery outerHeight in older versions where it won't return the height if you don't pass a parameter. Also as suggested in the comments you need to remove the true from height().

if ( $('.content-right').outerHeight(true) > $('.content-right').parent().parent().height() ) {
  $('.content-right').parent().parent().height($('.content-right').outerHeight(true));
}
console.log('Box Height: ' + $('.content-right').parent().parent().height());
console.log('Content Height: ' + $('.content-right').height() );

UPDATE:

Try this (and the bug mentioned above still applies, so make sure to put in a parameter). The code below gives me a height of 868.

var outerHeight = 0;
$('.content-right > *').each(function() {
  outerHeight += $(this).outerHeight(true);
});
console.log(outerHeight);