jquery ruft Dokumenthöhe und Fensterhöhe summary_jquery ab

jquery ruft die Fensterhöhe und Fensterhöhe ab, $(document).height(), $(window).height()

1. $(document).height(): Die Dokumenthöhe der gesamten Webseite
2. $(window).height(): Die Höhe des sichtbaren Fensters des Browsers
3. $(window).scrollTop(): Die Höhe vom oberen Rand des visuellen Fensters des Browsers bis zum oberen Rand der Webseite (vertikaler Versatz)
4. $(document.body).height();//Die Höhe des Dokumentkörpers im aktuellen Fenster des Browsers
5. $(document.body).outerHeight(true);//Die Gesamthöhe des Dokumentkörpers im aktuellen Fenster des Browsers, einschließlich Randauffüllungsrand
6. $(window).width(); //Breite des sichtbaren Bereichs des aktuellen Browserfensters
7. $(document).width();//Breite des Dokumentobjekts im aktuellen Fenster des Browsers
8. $(document.body).width();//Die Höhe des Dokumentkörpers im aktuellen Fenster des Browsers
9. $(document.body).outerWidth(true);//Die Gesamtbreite des Dokumentkörpers im aktuellen Fenster des Browsers, einschließlich Randauffüllungsrand

Um es in einem Satz zu verstehen: Wenn die Bildlaufleiste der Webseite an das unterste Ende gezogen wird, $(document).height() == $(window).height() $(window).scrollTop( ).

Wenn die Höhe der Webseite kleiner als das Browserfenster ist, gibt $(document).height() $(window).height() zurück.

Es wird nicht empfohlen, Höhen wie $("html").height() und $("body").height() zu verwenden.

Grund:

$("body").height(): Der Körper kann einen Rand haben und die erhaltene Höhe ist kleiner als $(document).height();

$("html").height(): Die Bedeutung der in verschiedenen Browsern erhaltenen Höhe ist unterschiedlich. Um es ganz klar auszudrücken: Der Browser ist nicht kompatibel.

Es liegt ein Problem mit dem Wert $(window).height() vor. Was zurückgegeben wird, ist nicht die Höhe des Browserfensters?

Grund: Die Webseite enthält nicht die Anweisung

js ruft Seitenhöhe und Fensterhöhe ab

Praktische Anwendung: Stellen Sie die passende Höhe des Inhaltsbereichs ein

//设置内容区域合适高度
  var docH = $(document).height(),
    winH = $(window).height(),
    headerH = $(".header").outerHeight();
    footerH = $(".footer").outerHeight();
  if(docH<=winH+4){
    $("div.container").height(winH-headerH-footerH-50);
  }