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

Long shot, but I think you might need `.outerHeight({margin: true});` — Elliot Bonneville, Apr 22 '12 at 14:44

score 36 · Answer 1 · edited Aug 05 '17 at 17:13

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! :)

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. — Brett, Mar 21 '20 at 21:08
this is a correct answer but you have to change your function to $(window).on('load', function() { ... }); as .load no longer exist — sam kh, May 31 '22 at 07:01

score 10 · Answer 2 · answered Feb 18 '13 at 06:57

10

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!

answered Feb 18 '13 at 06:57

Matt Reilly

101
1
2

Zoran P. · Answer 3 · 2013-02-03T11:40:32.610

6

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

edited Feb 03 '13 at 11:40

answered Feb 03 '13 at 11:15

Zoran P.

870
1
13
16

1

This solved a similar problem perfectly for me. Thanks Zoran. – Nick Martin May 09 '13 at 12:35
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. – KBN Oct 30 '13 at 08:12

score 4 · Answer 4 · answered Apr 22 '12 at 14:45

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.

answered Apr 22 '12 at 14:45

Elliot Bonneville

51,872
23
96
123

That gives me the same value as outerHeight(true) – Viktor Apr 22 '12 at 14:55

score 4 · Answer 5 · answered Oct 31 '17 at 12:59

4

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

Try the scrollHeight property:

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

answered Oct 31 '17 at 12:59

Rob

781
5
19

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. – Fuad Zeyad Tareq May 15 '22 at 19:42

score 3 · Answer 6 · answered May 27 '16 at 22:41

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.

score 0 · Answer 7 · answered Jul 07 '15 at 16:32

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.

score 0 · Answer 8 · answered Feb 24 '16 at 05:50

0

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

answered Feb 24 '16 at 05:50

corysimmons

7,296
4
57
65

score 0 · Answer 9 · answered Apr 21 '18 at 21:16

0

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

the page is zoomed
the element or its parent is hidden

answered Apr 21 '18 at 21:16

StoriKnow

5,738
6
37
46

score 0 · Answer 10 · answered Sep 13 '18 at 12:08

0

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
});

answered Sep 13 '18 at 12:08

Caleb

105
2
10

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. – Hielke Sep 02 '22 at 10:28

score 0 · Answer 11 · answered Mar 31 '21 at 18:49

0

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)

answered Mar 31 '21 at 18:49

Barbz_YHOOL

589
4
15

outerHeight(true) gives wrong value

11 Answers11

Linked