jquery $ (window) .height () gibt die Dokumenthöhe zurück

104

Ich bin sicher, dass ich einen einfachen Fehler mache, aber ich alarmiere einfach $(window).height()und er gibt den gleichen Wert zurück wie $(document).height().

Ich habe einen 13-Zoll-MBA und meine Fensterhöhe meiner Browser liegt bei einer Maximierung zwischen 780 und 820 Pixel (ungefähr), aber jedes Mal wird eine Fensterhöhe zurückgegeben, die mit der Dokumenthöhe identisch ist. In jedem Fall auf der Site, an der ich arbeite, ist dies der Fall über 1000px.

Was geht hier vor sich?

alert($(window).height());
alert($(document).height());
jquery Fraser
quelle
An welchem ​​Browser arbeiten Sie?
Kanishka Panamaldeniya
Dieses Problem trat mit jquery-1.8.0 auf, ältere Versionen von jquery haben dies korrekt ausgeführt (auch ohne das DOCTYPE-Set)
ralhei

Antworten:

245

Ohne doctypeTag meldet Chrome für beide Anrufe denselben Wert.

Das Hinzufügen eines strengen Doctype wie <!DOCTYPE html>bewirkt, dass die Werte wie angekündigt funktionieren.

Das doctypeTag muss das allererste in Ihrem Dokument sein. Sie können beispielsweise keinen Text davor haben, auch wenn nichts gerendert wird.

Tom Hubbard
quelle
11
FireFox führt diese Berichterstellung auch durch, es sei denn, Sie verwenden einen strengen Doctype wie <! DOCTYPE HTML>
Tom Chiverton,
Außerdem führt ein falscher Doctype dazu, dass der Twitter-Bootstrap-Scrollspy aus demselben Grund seltsam handelt, aus dem $ (window) .height () die Dokumenthöhe zurückgibt.
Nidheeshdas
3
In meinem Fall hatte ich einen Response.WriteCode in meinem Code auf einer ASP-Site, die 1vor HTML HTML ausgab. Mein Dokumenttyp stimmte also, war aber technisch gesehen nicht das erste auf der Seite.
James
1
Ich habe das gleiche Problem, aber Doctype ist korrekt deklariert :(
bia.migueis
1
" Das doctype-Tag muss das allererste in Ihrem Dokument sein. ZB können Sie keinen PHP-Code davor haben, auch wenn es nichts rendert. " Wie kann das möglicherweise sein? Der Browser weiß nicht, was auf dem Server läuft, er empfängt nur eine Textdatei mit HTML-Markup. Was ist, wenn Sie IIS und nicht Apache ausführen? Dem Browser ist es egal, was der Server tut.
Sablefoste
24

Ich hatte das gleiche Problem und mit diesem Problem konnte ich es lösen.

var w = window.innerWidth;
var h = window.innerHeight;
Eduardo
quelle
1
so seltsam, ich benutze auch den richtigen Doctype. Ihre innere Höhe hat mein Problem behoben! Vielen Dank
Martijn van Hoof
1
Gleiches Problem - hatte gültigen Doctype und alle. Etwas plattformübergreifender: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
Melanie Johnson
Das Problem wirklich beheben (und ja, ich habe einen Doctype - als erstes auf jeder Seite)
Hillcode
1

Ich denke, Ihr Dokument muss genügend Platz im Fenster haben, um seinen Inhalt anzuzeigen. Das heißt, Sie müssen nicht nach unten scrollen, um weitere Teile des Dokuments anzuzeigen. In diesem Fall entspricht die Dokumenthöhe der Fensterhöhe.

Xmindz
quelle
Das Dokument befindet sich auf jeder Seite unter dem unteren Rand des Fensters.
Fraser
0

Hier ist eine Frage und Antwort dazu: Unterschied zwischen screen.availHeight und window.height ()

Hat auch Bilder, so dass Sie tatsächlich die Unterschiede sehen können. Hoffe das hilft.

$(window).height()Geben Sie grundsätzlich die maximale Höhe innerhalb des Browserfensters (Ansichtsfenster) und $(document).height()die Höhe des Dokuments innerhalb des Browsers an. Meistens sind sie auch mit Bildlaufleisten genau gleich.

Solomon Closson
quelle
0

Es funktioniert wirklich, wenn wir Doctype auf unserer Webseite verwenden. JQuery (Fenster) gibt die Höhe des Ansichtsfensters zurück, andernfalls wird die vollständige Dokumenthöhe zurückgegeben.

Definieren Sie das folgende Tag oben auf Ihrer Webseite: <!DOCTYPE html>

Gourav Yadav
quelle
Verwenden Sie dieses Tag oben auf Ihrer Webseite: <! DOCTYPE html>
Gourav Yadav