outerHeight(true) gives wrong value

问题

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

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

回答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!

回答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

回答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.

回答5:

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.

回答6:

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.

回答7:

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

回答8:

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

Try the scrollHeight property:

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

回答9:

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

the page is zoomed
the element or its parent is hidden

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

来源：https://stackoverflow.com/questions/10268892/outerheighttrue-gives-wrong-value

标签

jquery

positioning

dimensions