outerHeight(true) gives wrong value

Question

I want the height of a container element, including margins and paddings.

When I hover over the element in Chrome development tool, I get the value that I'm looking for but when I use jQuery $('element').outerHeight(true); I get a much smaller value.

The element contains a jQuery carousel (in a container with position:relative and items position: absolute), could that have something to do with it?

Thanks in advance

Necessaries

Long shot, but I think you might need .outerHeight({margin: true}); – Skipp

Answer 1

I have experience this issue several times, and the best solution, without the use of any plugins or unruly setTimeout functions, is to use hook into the browser's onLoad event. With jQuery, it's done like so:

$(window).load(function(){ ...outerHeight logic goes here... });

This could be totally separate from your standard $(function(){ ...code... }); so all of your other properly working code doesn't have to wait until every single element on the page has loaded.

Why this happens in the first place:
Chrome has a different rendering algorithm than Firefox, which causes it to trigger the onLoad event before all the elements on the page are completely drawn/displayed and available for jQuery to select and retrieve heights. setTimeout() will work most of the time, but you don't want to develop a dependency on something so blind by nature – who knows, in the future this "quirk" in Chrome could be fixed! :)

Vervet

Thank you so much for this - I was starting to pull my hair out and couldn't figure out why it was giving me an incorrect height. FTR, Firefox was doing it too. – Buccaneer

this is a correct answer but you have to change your function to $(window).on('load', function() { ... }); as .load no longer exist – Arrestment

Answer 2

I had the same problem. I get the correct height in Chrome by using setTimeout to wait a bit:

    setTimeout ( function () {
        var ht = $('.my-class').outerHeight( true );
    }, 1);

I hope that helps!

Hughie

Answer 3

I've run into same problem.

Firefox outerheight via console.log: 430 Chrome outerheight via console.log: 477

Real outerheight (firebug layout): 820

After opening Firebug or removing statusbar it sets correct value (820) in console.log (and hence the code works as it should).

The issue was due to images. Even though you are running it on document ready, not all images might be loaded yet, and therefore the calculations are wrong.

I am using desandro's plugin and it has fixed my issue. https://github.com/desandro/imagesloaded

Tutu

This solved a similar problem perfectly for me. Thanks Zoran. – Alita

just ran into this problem, a container with an image in it caused the problem. I defined a height for the container in CSS, that didn't help. But what solved is #container img { max-width: 100%; }. That means, the image overflowing the container was causing the problem. – Oology

Answer 4

I think you might need

.outerHeight({margin: true});

As per here:

The margin can be included by passing an options map with margin set to true.

Skipp

That gives me the same value as outerHeight(true) – Necessaries

Answer 5

Inner hidden, fixed and absolute elements are not properly accounted for using the outerHeight.

Try the scrollHeight property:

$('element').prop('scrollHeight')

Gigolo

Seems to me like this is a bug that's still happening 5 years later. If 'scrollHeight' can provide us with the correct height without having to wait for $(window).load(), then it seems to me that .outerHeight(true) and .innerHeight() should also be able to do the same. – Lout

Answer 6

the one that worked exactly as it should for me was a combine of both @Matt Reilly & @Lasha answers

$(window).load(function() {
    setTimeout(function() {
        // all the logic in here
    }, 1);
});

i used to put the code in in $(document).ready(function(){...}); but it gets wanky sometimes so the above works perfectly.

Ratepayer

Answer 7

If the window is loaded and the document ready and you have accounted for floats and you still get this issue then consider looking for an element with the same id. Be certain you are getting the right element with your jQuery selector. I forgot I had another element in the dom with the exact same id. Consider using jQuery to change the background color to verify.

Mcbryde

Answer 8

Tried every single one of these solutions. Finally opened up inspector and realized my p still had a margin-top. As always thanks Normalize...

Boffin

Answer 9

According to the docs, outerHeight isn't guaranteed to be accurate when:

• the page is zoomed
• the element or its parent is hidden

Subrogate

Answer 10

A little hack. Place the code inside jquery's on load, scroll and resize functions like this:

$(window).on('load scroll resize', function(){
    //outerHeight code
});

Counterreply

It works, but there's a caveat here.. when using this with a fixed positioned element, the layout shifts, which is not what you want. – Jerid

Answer 11

If you select by class, you may select multiple elements at once, and if the first element has a wrong height, it will be the height you'll get with outerHeight() (that was my issue personally)

Ator