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 lookin

Answer 1

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.

Answer 2

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

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

Answer 3

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

Try the scrollHeight property:

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

Answer 4

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.

Answer 5

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

Answer 6

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