ブラウザウィンドウ、ドキュメント、html、体の高さに関する調査_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

ブラウザウィンドウ、ドキュメント、html、体の高さに関する調査_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

まず、これらの要素の計算を私が理解している範囲で説明します

ウィンドウの高さは、ドキュメントが配置されているウィンドウの表示高さ（ブラウザのスクロールバーを除く）と計算方法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 番目の図に見られるように、スクロールバーが含まれる可能性があることです。

この種の分析は最も時間がかかりますが、それが良いと思われる場合は、無視しないでください。

この記事が良いと思ったら右下の【おすすめ】をクリックしてください！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。