ホームページ > 記事 > ウェブフロントエンド > ブラウザウィンドウ、ドキュメント、html、体の高さに関する調査_html/css_WEB-ITnose
ブラウザウィンドウ、ドキュメント、html、体の高さに関する調査_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:481228ブラウズ
まず、これらの要素の計算を私が理解している範囲で説明します
ウィンドウの高さは、ドキュメントが配置されているウィンドウの表示高さ（ブラウザのスクロールバーを除く）と計算方法is document.documentElement.clientHeight
文書の高さ 文書コンテンツの高さでなければなりません、計算方法は Math.max(document.body[ "scrollHeight" ], document.documentElement[ "scrollHeight"]) です
HTML heightはhtml要素の高さ(境界線のスクロールバーを含む)、計算方法はhtmlElement.offsetHeight
bodyの高さはbody要素(境界線のスクロールバーを含む)の高さ、計算方法はbodyElementsです。 offsetHeight;
上記のテスト方法はjQueryの処理と同じです。 jQuery を直接使用してテストします。
ユースケース:
注: 内部の #absolute は、ドキュメント フローから分離された要素です。
テストに必要な条件:
1. すべてのテストはマージン/パディングを整数に設定せずに測定されます。
2. 著者は、QQ スクリーンショット ツールを使用してピクセルを比較します
<!DOCTYPE html><html lang="ch-cn"> <head> <meta charset="utf-8"> <script type="text/javascript" src='jquery-1.9.1.js'></script> <style type="text/css"> html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; } #absolute{ position: absolute; margin-left: 300px; height: 500px; width: 500px; background: #ff0; } #normal{ height: 300px; width: 300px; background: #f00; } </style> </head> <body> <div id='absolute' >我是absolute</div> <div id="normal">我是normal</div> <script type="text/javascript"> function show(){ console.log("window height " + $(window).height()); console.log("document height " + $(document).height()); console.log("html height " + $("html").height()); console.log("body height " + $("body").height()); } </script> </body> </html> 表示効果は
最初のテストセット: IE8
IE8 の概要:
ウィンドウが表示される高さ、除くブラウザのスクロール バー (IE の後ろの 2 つの画像と比較すると、2 番目の IE の下に 6 ピクセルを占めるスクロール バーがあります)。 IE には特性があります。ウィンドウの高さは、実際に表示されているウィンドウよりも 4 ピクセル低いです (3 番目の IE の図からわかるように、この時点ではドキュメントの高さは表示されているウィンドウの高さと同じです)。これは、次のことを意味します。 IEのウィンドウの四辺に2pxの隙間がありますが、これはIE独自のオフセット値です。
ドキュメントのドキュメントの高さ、完全に表示されたすべてのドキュメント コンテンツの高さ (非 iframe (ドキュメント フローから分離された要素の表示を含む)、最初の IE 画像が利用可能) および IE ワークスペース (HTML の説明を参照)最大値を取得します（この高さはウィンドウのスクロールバーをどこでスクロールできるかを最終的に決定します）
HTMLの高さはウィンドウの高さです このウィンドウは、ビジュアルウィンドウを含む、IE自体によって定義されるブラウザーの作業領域の高さです。 、2px オフセット、ブラウザのスクロール バーなど。以下のレンダリングを見てください
本文の高さは、コンテンツの実際の高さです (ドキュメント フローの外側に配置されると内側になくなります。3 つの写真がこれを証明できます) )
2 番目のテストセット: IE9+
IE9+ の概要:
ウィンドウの高さは、ブラウザーのスクロール バーを除いた、表示されているウィンドウの高さです。
ドキュメントドキュメントの高さ、完全に表示されたすべてのドキュメントコンテンツの高さ（iframe内ではない（ドキュメントフローから分離された要素の表示を含む）、最初のIE画像が利用可能）、およびIEワークスペース（HTMLの説明を参照）最大値を取得します（この高さはウィンドウのスクロールバーをどこでスクロールできるかを最終的に決定します）
HTMLの高さはウィンドウの高さです このウィンドウは、ビジュアルウィンドウを含む、IE自体によって定義されるブラウザーの作業領域の高さです。 IE8 よりも標準的なブラウザのスクロール バー (オフセットはなく、スクロール バーとワークスペースの端の間に隙間はありません。下の図を参照)
本体の高さは実際の高さですコンテンツの内容 (ドキュメント フローの外に配置されると内側になくなります)
2 番目のテスト セット: chrome
Chrome の概要:
ウィンドウの高さは、ブラウザを除いた視覚的なウィンドウの高さです。スクロールバー。
ドキュメントの高さは、すべてのドキュメントコンテンツを完全に表示する高さ（非iframe（ドキュメントフローから分離された要素の表示を含む）では、最初のChromeピクチャが利用可能）とビジュアルウィンドウの高さの最大値（この高さ）最終的にウィンドウのスクロールバーを決定します（どこにスクロールして表示できるか）
HTMLの高さは本文コンテンツの高さと同じです
本文の高さコンテンツの実際の高さ（内側にある場合はもう内側ではありません）ドキュメント フローの外に配置されます)
第 3 セットのテスト: Firefox
Firefox の概要:
ウィンドウの高さは、ブラウザーのスクロール バーを除いた、視覚的なウィンドウの高さです。
ドキュメントの高さは、すべてのドキュメントコンテンツを完全に表示する高さ（非iframe（ドキュメントフローから分離された要素の表示を含む）では、Firefoxの最初の画像が利用可能）とビジュアルウィンドウの高さの最大値（この高さ）最終的にウィンドウのスクロールバーを決定します（どこにスクロールして表示できるか）
HTMLの高さは本文コンテンツの高さと同じです
本文の高さはコンテンツの実際の高さです（外側に配置されている場合は内側ではなくなります）ドキュメントフローの）
まあ、要約すると：
ウィンドウの高さは、ブラウザのスクロールバーの高さを除いた、視覚的なウィンドウの高さです。特別なのは、IE8 の表示ウィンドウの横に 2px のオフセットがあるため、IE8 の表示ウィンドウの高さは、表示されているウィンドウより 4px 小さくなるということです。
🎜 ドキュメントの高さはドキュメント全体の高さです。この高さの計算はブラウザによって異なります: 標準ブラウザのドキュメントの高さ = 最大 (ドキュメントの実際の完全な高さ (ドキュメント フローから分離された要素の表示を含む)、ビジュアル ウィンドウの高さ) ); IE ブラウジング ドキュメントの高さ = 最大 (ドキュメントの実際の完全な高さ (ドキュメント フローから分離された要素の表示を含む)、IE ワークスペースの高さ)🎜HTML の高さには 2 つの基本的なタイプがあります: 標準ブラウザの HTML の高さ = 本文コンテンツの高さ; IE ブラウザの HTML の高さ = IE ワークスペースの高さ (詳細については IE 分析を参照)
本文の高さはコンテンツの実際の高さです (そうではありません)。ドキュメント フローの外側に位置します)、再び内側に位置します)。
比較まとめから、IEと標準ブラウザの最大の違いは、ドキュメントとhtmlの計算方法であることがわかります。注意すべき点の 1 つは、IE のドキュメントの高さが IE ワークスペースの高さになる可能性があるため、IE9+ テストの 2 番目の図に見られるように、スクロール バーが含まれる可能性があることです。
この種の分析は最も時間がかかりますが、それが良いと思われる場合は、無視しないでください。
この記事が良いと思ったら右下の【おすすめ】をクリックしてください！