perché jquery .height() ottiene un risultato diverso su chrome?

Question

Questo è il modo in chrome mostrano la larghezza e l'altezza del div:

che è corretto, infatti, l'altezza è 1466. Ma, se faccio questo:

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

esso stampa 1418. Non ha alcuna spaziatura/margine. Perché? E come posso ripararlo?

Answer 1

Questo perché il domready alcune immagini non vengono caricate completamente. Dovresti chiamare l'altezza sul carico della finestra.

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

È possibile anche utilizzare outerHeight:

ottenere la corrente altezza calcolata per il primo elemento nella serie di elementi accoppiati, inclusi padding, bordo e margine opzionalmente. Restituisce una rappresentazione intera (senza "px") del valore o null se chiamata su un insieme vuoto di elementi.

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

Answer 2

Utilizzare outerHeight() per ottenere l'altezza con i paddings. Utilizzare outerHeight(true) per ottenere l'altezza con paddings + margini.

Here's a link to the documentation.

Answer 3

.height() ti porterà l'altezza dell'elemento, .outerHeight() restituirà l'altezza compresa padding, margini e confini.