jquery はドキュメントの高さとウィンドウの高さを取得します

jquery はウィンドウの高さとウィンドウの高さ $(document).height(), $(window).height() を取得します

1. $(document).height(): Web ページ全体のドキュメントの高さ
2. $(window).height(): ブラウザの表示ウィンドウの高さ
3. $(window).scrollTop(): ブラウザのビジュアル ウィンドウの上部から Web ページの上部までの高さ (垂直オフセット)
4. $(document.body).height();//ブラウザの現在のウィンドウ内のドキュメント本文の高さ
5. $(document.body).outerHeight(true);//ブラウザの現在のウィンドウ内のドキュメント本文の合計の高さ (境界線の余白を含む)
6. $(window).width(); //現在のブラウザウィンドウの表示領域の幅
7. $(document).width();//ブラウザの現在のウィンドウのドキュメントオブジェクトの幅
8. $(document.body).width();//ブラウザの現在のウィンドウ内のドキュメント本文の高さ
9. $(document.body).outerWidth(true);//ブラウザの現在のウィンドウ内のドキュメント本文の合計幅 (境界線の余白を含む)

一文で理解すると、Web ページのスクロール バーを一番下まで引いたとき、 $(document).height() == $(window).height() + $(window).scrollTop ()。

Web ページの高さがブラウザ ウィンドウより小さい場合、$(document).height() は $(window).height() を返します。

$("html").height() や $("body").height() などの高さの使用は推奨されません。

理由:

$("body").height(): 本文には境界線がある場合があり、取得される高さは $(document).height() より小さくなります。

$("html").height(): ブラウザによって取得される高さの意味が異なります。端的に言えば、ブラウザに互換性がありません。

$(window).height() の値に問題があります。返される値はブラウザ ウィンドウの高さではありません。

理由: Web ページに ステートメントが含まれていません。

js はページの高さとウィンドウの高さを取得します

実際の応用: コンテンツ領域の適切な高さを設定します

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