jquery $ (window) .height () renvoie la hauteur du document

104

Je suis sûr qu'il y a une simple erreur que je fais, mais je suis simplement en train d'alerter $(window).height()et cela renvoie la même valeur que $(document).height().

Je suis sur un MBA de 13 "et la hauteur de ma fenêtre de mes navigateurs lorsque maximisée entre 780px - 820px (environ) mais à chaque fois elle renvoie une hauteur de fenêtre identique à celle de la hauteur du document. Dans tous les cas sur le site sur lequel je travaille, c'est plus de 1000 pixels.

Qu'est-ce qui se passe ici?

alert($(window).height());
alert($(document).height());
jquery Fraser
la source
sur quel navigateur travaillez-vous?
Kanishka Panamaldeniya
Ce problème a commencé à apparaître avec jquery-1.8.0, les anciennes versions de jquery l'ont fait correctement (même sans l'ensemble DOCTYPE)
Ralhei

Réponses:

245

Sans doctypebalise, Chrome rapporte la même valeur pour les deux appels.

L'ajout d'un doctype strict tel que <!DOCTYPE html>fait fonctionner les valeurs comme annoncé.

La doctypebalise doit être la toute première chose de votre document. Par exemple, vous ne pouvez pas avoir de texte devant lui, même s'il ne rend rien.

Tom Hubbard
la source
11
FireFox fait également ce rapport, sauf si vous utilisez un doctype strict comme <! DOCTYPE HTML>
Tom Chiverton
De plus, un doctype incorrect fait que Twitter bootstrap scrollspy agit bizarrement pour la même raison que $ (window) .height () renvoie la hauteur du document.
nidheeshdas
3
Dans mon cas, j'avais un Response.Writedans mon code derrière sur un site ASP qui sortait un 1avant tout HTML. Donc, mon type de document était correct, mais ce n'était pas la première chose sur la page, techniquement.
James
1
j'ai le même problème mais doctype est déclaré correctement :(
bia.migueis
1
" La balise doctype doit être la toute première chose dans votre document. Par exemple, vous ne pouvez pas avoir de code php devant elle, même si elle ne rend rien. " Comment est-ce possible? Le navigateur ne sait pas ce que le serveur exécute, il ne reçoit qu'un fichier texte avec un balisage HTML. Que faire si vous exécutez IIS et non Apache? Le navigateur ne se soucie pas de ce que fait le serveur.
Sablefoste
24

J'ai eu le même problème et mon utilisation l'a résolu.

var w = window.innerWidth;
var h = window.innerHeight;
Eduardo
la source
1
tellement bizarre, j'utilise également le bon doctype. votre hauteur intérieure a résolu mon problème! Merci
Martijn van Hoof
1
Même problème - avait un doctype valide et tout. Un peu plus multiplateforme: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
melanie johnson
vraiment résoudre le problème (et oui j'ai un doctype - première chose sur chaque page)
hillcode
1

Je pense que votre document doit avoir suffisamment d'espace dans la fenêtre pour afficher son contenu. Cela signifie qu'il n'est pas nécessaire de faire défiler vers le bas pour voir une autre partie du document. Dans ce cas, la hauteur du document serait égale à la hauteur de la fenêtre.

Xmindz
la source
Le document s'étend sous le bas de la fenêtre dans chaque page.
Fraser
0

Voici une question et réponse à cela: Différence entre screen.availHeight et window.height ()

A des photos aussi, donc vous pouvez réellement voir les différences. J'espère que cela t'aides.

Fondamentalement, $(window).height()donnez-vous la hauteur maximale à l'intérieur de la fenêtre du navigateur (fenêtre) et $(document).height()vous donne la hauteur du document à l'intérieur du navigateur. La plupart du temps, ils seront exactement les mêmes, même avec des barres de défilement.

Solomon Closson
la source
0

Cela fonctionne vraiment si nous utilisons Doctype sur notre page Web jquery (window) retournera la hauteur de la fenêtre, sinon la hauteur complète du document.

Définissez la balise suivante en haut de votre page Web: <!DOCTYPE html>

Gourav Yadav
la source
utilisez cette balise en haut de votre page Web: <! DOCTYPE html>
Gourav Yadav