outerHeight (true) da el valor incorrecto

Question

Quiero la altura de un elemento contenedor, incluidos los márgenes y los rellenos.

Al pasar el puntero sobre el elemento en la herramienta de desarrollo de Chrome, obtengo el valor que estoy buscando pero cuando uso jQuery $('element').outerHeight(true); Obtengo un valor mucho más pequeño.

El elemento contiene un carrusel jQuery (en un contenedor con position:relative y artículos position: absolute), ¿podría tener algo que ver con eso?

Gracias de antemano

Answer 1

creo que es posible que tenga

.outerHeight({margin: true}); 

Según here:

El margen se puede incluir pasando un mapa opciones con un margen establecido en true.

Answer 2

He tenido el mismo problema.

outerheight Firefox a través de console.log: 430 Chrome outerheight través console.log: 477

outerheight real (disposición Firebug): 820

Después de abrir Firebug o quitar la barra de estado que define el valor correcto (820) en console.log (y, por lo tanto, el código funciona como debería).

El problema se debió a las imágenes. Aunque lo está ejecutando en un documento listo, no todas las imágenes pueden estar cargadas todavía y, por lo tanto, los cálculos son incorrectos.

Estoy usando el complemento de desandro y se ha solucionado el problema. https://github.com/desandro/imagesloaded

Answer 3

Tuve el mismo problema. Me da la altura correcta en Chrome mediante el uso de setTimeout que esperar un poco:

setTimeout (function() { 
     var ht = $('.my-class').outerHeight(true); 
    }, 1); 

espero que ayude!

Answer 4

Tengo experiencia en este problema varias veces, y la mejor solución, sin el uso de ningún plugin o funciones indiscretas de setTimeout, es usar hook en el evento onLoad del navegador. Con jQuery, se hace así:

$(window).load(function(){ ...outerHeight logic goes here... });

Esto podría ser totalmente independiente de su nivel $(function(){ ...code... }); de modo que todo su otro código que funcione correctamente y no tiene que esperar hasta que cada elemento individual en la página se ha cargado.

¿Por qué sucede esto en el primer lugar:
Chrome tiene un algoritmo de representación diferente de Firefox, que hace que se activa el evento onLoad antes de que todos los elementos de la página están completamente estiradas/visualizada y disponible para jQuery para seleccionar y recuperar alturas. setTimeout() funcionará la mayor parte del tiempo, pero no desea desarrollar una dependencia en algo tan ciego por naturaleza, quién sabe, ¡en el futuro podría arreglarse esta "peculiaridad" en Chrome!:)

Answer 5

Si la ventana está cargada y el documento está listo y usted ha considerado flotantes y todavía tiene este problema, considere buscar un elemento con la misma identificación. Asegúrese de estar obteniendo el elemento correcto con su selector jQuery. Olvidé que tenía otro elemento en el dom con la misma identificación exacta. Considere usar jQuery para cambiar el color de fondo para verificar.

Answer 6

Intenté cada una de estas soluciones. Finalmente abrí el inspector y me di cuenta de que mi p todavía tenía un margin-top. Como siempre, gracias Normalizar ...

Answer 7

el que funcionó exactamente como debe ser para mí fue un combinado de ambos @ Matt Reilly & @Lasha respuestas sobre

$(window).load(function() { 
    setTimeout(function() { 
     // all the logic in here 
    }, 1); 
}); 

Solía ​​poner el código en en $(document).ready(function(){...}); pero a veces se vuelve travieso así que lo anterior funciona perfectamente.

Answer 8

Los elementos internos ocultos, fijos y absolutos no se tienen en cuenta de forma adecuada con el exterior.

Tratar la propiedad scrollHeight:

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