why jquery .height() get a different result on chrome?

Question

This is how chrome show the width and height of the div :

which is correct, in fact the height is 1466. But, if I do this :

$(document).ready(function () {
    console.log($('#container-altezza-fisso').height());
});

it prints 1418. It doesnt have any padding/margin. Why? And how can I fix it?

Answer 1

That's because on DOMReady some images are not loaded completely. You should call the height on window load.

$(window).load(function(){
    console.log($('#container-altezza-fisso').height());
})

You can also use outerHeight:

Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.

console.log($('#container-altezza-fisso').outerHeight());

Answer 2

Use outerHeight() to get the height with paddings. Use outerHeight(true) to get the height with paddings + margins.

Here's a link to the documentation.