htmlページのディメンションを理解するにはどうすればよいですか？

Question

1日目から私にとって謎だった。それはまだあります。それを明らかにする時が来た。そこでtest pageを作成しました。変更できる範囲はdivです。関連するプロパティの値を表示する情報パネル。シンプルさのためにChromeを使ってみましょう。

デフォルトbodyマージンが8pxです。 htmlの背景は青、bodyの緑色、divは赤色です。そして、ここではhtmlのoffsetHeightがbody.offsetHeight + 2 * body.marginに等しいことがわかります。まるでそれがちょうどbodyを包むかのようです。しかし、html.clientHeight == window.innerHeightは、ビューポートを埋めるように引き伸ばされているかのようです。

今度は、（div年代幅1000pxを作る）水平スクロールバーを追加してみましょう、と右に少しスクロール：左へ

htmlとbody動きます。 bodyのscrollLeftは、スクロールバーを所有しているかのようにwindow.pageXOffsetと同期して変化します。追加されたスクロールバーのためhtmlのclientHeightが変更されました。

はのは、それを他の方法で回避（垂直スクロールバーを）やってみましょう：

今両方htmlのエクステントが（offsetWidthとclientWidth）に変更しました。これはスクロールバーを所有していないことを示唆しています。

そして最後に、両方のスクロールバーで：

さて、この時点で物事が私にclear多かれ少なかれです。少なくとも私たちはChromeを検討している限りです。しかし、まだ私が知りたいことがいくつかあります。 htmlのclientHeightはおそらくoffsetHeight、その後以下とすることができるどのように来る

• ？ 「それだけです」よりも良い説明はありますか？

• なぜbodyのscrollLeft/scrollTopがページをスクロールすると変更されますか？スクロールバーは所有していませんか？

また、いくつかの要約があります。

Answer 1

したがって、ビューポート（ウィンドウ）に表示されるキャンバスがあります。キャンバスにはhtml要素があり、それにはbodyが含まれています。彼らは主にdivのに似ているが、いくつかの癖を持っている：デフォルト（width: auto）によって

• html要素ビューポートにフィットするように広がっています。おそらく変わったものではありません。ビューポートはhtmlのコンテナです。通常はdivとして、コンテナの幅（スクロールバーを除く）に合わせます。

• htmlの高さは、body要素と同じくらい大きい。しかし何らかの理由でclientHeightは、ビューポートの高さからスクロールバーを差し引いたものと等しくなります。あたかもY軸に沿ってビューポートにフィットするように伸びるかのように。

• bodyのscrollLeft/scrollTopプロパティは、ビューポートのpageXOffset/pageYOffset

• bodyミラーの上マージンがhtmlの1

• bodyで崩壊しない下まで伸びの兆候を示しませんあなたが例えばbottomプロパティが設定されている絶対的に配置された要素を持っていない限り、ビューポートのエッジです。 offsetParent値、絶対配置要素がデフォルトでレンダリングされる相対れる要素としてbody作用がhtml年代だという違いがあるFirefoxで

（他の絶対配置の要素までの階層がある場合を除く）から判断しますscrollLeft/scrollTopミラービューポートのプロパティpageXOffset/pageYOffset。

それはすべて私が見ているものの私の解釈です。誰かが私を訂正してくれたら嬉しいです。