jquery $ (ventana) .height () devuelve la altura del documento

104

Estoy seguro de que estoy cometiendo un error simple, pero simplemente estoy alertando $(window).height()y devuelve el mismo valor que $(document).height().

Estoy en un MBA de 13 "y la altura de la ventana de mis navegadores cuando se maximiza entre 780px - 820px (aproximadamente), pero cada vez devuelve una altura de ventana idéntica a la altura del documento. En todos los casos en el sitio en el que estoy trabajando es más de 1000px.

¿Que esta pasando aqui?

alert($(window).height());
alert($(document).height());
jquery Fraser
fuente
¿En qué navegador estás trabajando?
Kanishka Panamaldeniya
Este problema comenzó a aparecer con jquery-1.8.0, las versiones anteriores de jquery lo hicieron correctamente (incluso sin el conjunto DOCTYPE)
ralhei

Respuestas:

245

Sin doctypeetiqueta, Chrome informa el mismo valor para ambas llamadas.

Agregar un tipo de documento estricto como <!DOCTYPE html>hace que los valores funcionen como se anuncia.

La doctypeetiqueta debe ser la muy primera hora de su documento. Por ejemplo, no puede tener ningún texto antes, incluso si no representa nada.

Tom Hubbard
fuente
11
FireFox también realiza este informe a menos que use un tipo de documento estricto como <! DOCTYPE HTML>
Tom Chiverton
Además, el tipo de documento incorrecto hace que twitter bootstrap scrollspy actúe de manera extraña por la misma razón que $ (window) .height () devuelve la altura del documento.
nidheeshdas
3
En mi caso, tenía un Response.Writeen mi código detrás en un sitio ASP que estaba generando un 1antes de cualquier HTML. Así que mi tipo de documento era correcto, pero técnicamente no era lo primero en la página.
James
1
tengo el mismo problema pero el tipo de documento se declara correctamente :(
bia.migueis
1
" La etiqueta doctype debe ser lo primero en su documento. Por ejemplo, no puede tener ningún código php antes, incluso si no representa nada " . ¿Cómo puede ser esto posible? El navegador no sabe qué está ejecutando el servidor, solo recibe un archivo de texto con marcado HTML. ¿Qué sucede si está ejecutando IIS y no Apache? Al navegador no le importa lo que esté haciendo el servidor.
Sablefoste
24

Tuve el mismo problema, y ​​usarlo lo resolvió.

var w = window.innerWidth;
var h = window.innerHeight;
Eduardo
fuente
1
tan extraño, también estoy usando el tipo de documento adecuado. tu altura interior solucionó mi problema! Gracias
Martijn van Hoof
1
El mismo problema: tenía un tipo de documento válido y todo. Un poco más multiplataforma: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
melanie johnson
realmente solucionando el problema (y sí, tengo un tipo de documento, lo primero en cada página)
hillcode
1

Creo que su documento debe tener suficiente espacio en la ventana para mostrar su contenido. Eso significa que no es necesario desplazarse hacia abajo para ver más partes del documento. En ese caso, la altura del documento sería igual a la altura de la ventana.

Xmindz
fuente
El documento se extiende por debajo de la parte inferior de la ventana en cada página.
Fraser
0

Aquí hay una pregunta y una respuesta para esto: Diferencia entre screen.availHeight y window.height ()

También tiene fotos, por lo que puedes ver las diferencias. Espero que esto ayude.

Básicamente, le $(window).height()da la altura máxima dentro de la ventana del navegador (ventana gráfica) y $(document).height()le da la altura del documento dentro del navegador. La mayoría de las veces, serán exactamente iguales, incluso con barras de desplazamiento.

Solomon Closson
fuente
0

Realmente funciona si usamos Doctype en nuestra página web. Jquery (ventana) devolverá la altura de la ventana gráfica; de lo contrario, devolverá la altura completa del documento.

Defina la siguiente etiqueta en la parte superior de su página web: <!DOCTYPE html>

Gourav Yadav
fuente
use esta etiqueta en la parte superior de su página web: <! DOCTYPE html>
Gourav Yadav