Cómo obtener la altura de un elemento del cuerpo

Question

Aquí la altura total de todos los <div> es de 900 píxeles, pero la función jQuery devuelve la altura del cuerpo como 577 píxeles. (Si elimino el CSS del cuerpo, está funcionando).

¿Existe una solución para este problema?

$j(function() { 
    alert($j("body").height()); 
}) 

html, body { 
    height:100%; 
} 

<div style="height:200px">header</div> 
<div style="height:500px">content</div> 
<div style="height:200px">footer</div> 

Answer 1

Conjunto

html { height: 100%; } 
body { min-height: 100%; } 

en lugar de height: 100%.

El resultado que jQuery devuelve es correcto, porque ha establecido la altura del cuerpo al 100%, y esa es probablemente la altura de la ventana gráfica. Estos tres DIV estaban causando un desbordamiento, porque no había suficiente espacio para ellos en el elemento BODY. Para ver lo que quiero decir, establezca un borde en la etiqueta BODY y verifique dónde termina el borde.

Answer 2

Creo que la altura del cuerpo que se devuelve es la altura visible. Si necesita la altura total de la página, puede ajustar sus etiquetas div en un div que contiene y obtener el alto de eso.

Answer 3

Sólo tiene que utilizar

$(document).height() // - $('body').offset().top 

y/o

$(window).height() 

en lugar de $('body').height();

Answer 4

$ (document) .height() parece hacer el truco y le da la altura total incluyendo el área que solo es visible mediante desplazamiento.

Answer 5

Estábamos tratando de evitar el uso de la IE específica

$window[0].document.body.clientHeight 

y encontró que el siguiente jQuery no va a ceder siempre el mismo valor, pero finalmente lo hace en algún momento de nuestro escenario de carga de la página, que trabajó para nosotros y mantiene soporte multi-navegador:

$(document).height()