7

次のマークアップがある場合

<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>

次のスタイルで

html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}

FF13 で、html、body、wrapper 要素がブラウザ/ビュー ポートの 100% の高さに拡張されないのはなぜですか。Firebug で見ると、html、body、wrapper が下部から少し離れたところで垂直に停止します。コンテナの div は、コンテンツによって高さが決まるため、高さいっぱいまで拡張されます。

(html、ボディ、ラッパーの場合は 1263px X 558px) および (コンテナの場合は 960px X 880px)

デフォルトの 100% を見ると、下の最初の画像が示すように上記のことが起こります。しかし、最後の可能なズームインにズームすると、下の2番目の画像が示すように上記は発生せず、html、ボディ、ラッパーが完全な高さまで伸びます。

(html、ボディ、ラッパーの場合は 4267px X 1860px) - (コンテナーの場合は 960px X 1000px)

ここに画像の説明を入力 ここに画像の説明を入力

4

2 に答える 2

30

実際htmlには、ビューポートの 100% の高さまで正確に拡張されます。ここでのビューポートは、内部コンテンツではなく、ブラウザ ウィンドウです。

これを考慮してください（jsfiddle）：

<div id="div1">
    <div  id="div2">
        <div  id="div3">
            very much content
        </div>
    </div>
</div>

#div1 {
    height:300px;
    overflow-y:scroll;
    border: 1px solid black;
}
#div2 {
    height:100%;
}
#div3 {
    height:600px;
}

div1ここでは高さが 300px で、スクロールされます。コンテンツをスクロールするときは、内側の div を移動するだけですが、高さは変更されません300px。height:100%htmlに設定すると、まったく同じことが起こります。ブラウザの高さは変わりません。

ビューポートをズームアウトするとスクロールしないため、内部コンテンツの高さはビューポートの高さよりも小さくなります。

要するに、html {height:100%}内部コンテンツの高さではなく、親の高さに関係します

アップデート：

ブロック要素の高さに 3 種類の値を指定できます。

  • length - 固定の高さを設定します (ig '200px', '50em')。以上です、これ以上は何も言えません。

  • パーセンテージ- W3C 仕様から:

パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対配置されていない場合、値は 'auto' に計算されます。ルート要素の高さのパーセンテージは、最初の包含ブロックに相対的です。

  • auto - 高さは他のプロパティの値に依存します。(通常、内部コンテンツの高さ: テキスト、他のインライン要素、ブロック要素など)

ブラウザがページを表示したときに何が起こっているか:

  1. height: 100%になり<html>ます。つまり、結果の高さは、生成されたボックス (htmlその場合は -要素) を含むブロック (initial containing blockつまりbrowser window 、その場合) の高さに関して計算されます。としましょう1024px。
  2. それからそれはかかりheight: 100%ます<body>。bodyの高さを、 の既に計算された高さに設定htmlします1024px。
  3. 次に、ブラウザが に適用さheight:autoれ、#wrapper次に および に#container適用され<p>ます。正確な方法はわかりませんが、高さの設定（およびそれに依存する他のすべてのスタイル、つまり背景、境界線など）を延期し、内部コンテンツに進むと推測できます。
  4. 次のポイントはテキストコンテンツです。ブラウザは、指定された関連プロパティまたは独自の関連プロパティを取得します。つまりdefault styles、font-family、font-size、テキストの高さなどです。
  5. その後、高さを - 要素に設定する<p>ため、<p>すべてのコンテンツ (この場合はテキスト) が含まれるように下に引き伸ばされます。同じことが と にも起こり #containerます#wrapper。

の高さが (合意されたように)#wrapper本体の高さよりも大きい場合は、を に適用する必要があります。それがデフォルトです。次に、 に適用されます。次に、ブラウザに全体のスクロールが表示されます。正直なところ、これが W3C 仕様で指定されているかどうかはわかりませんが、指定されていると推測できます。1024 pxoverflowbodyvisibleoverflow: visiblehtmlwindow

したがって、ウィンドウをスクロールするhtmlとbody、他のすべての要素と同様に移動します。これは、他の要素の場合と同じ動作です (上記の jsfiddle のように):

体のスクロール部分

背景は要素に設定されますが、キャンバスbody全体、bodyつまり要素自体をはるかに超えて広がることに注意してください。これは、ボディに bg-property を設定する必要がある可能性があるというあなたの懸念に向けられています。これは、次のように述べているW3C 仕様に 100% 準拠しています。

ルート要素が...「background-color」の「transparent」と「background-image」の「none」の計算値を持つ「html」要素であるドキュメントの場合、ユーザーエージェントは代わりに背景の計算値を使用する必要がありますcanvasの背景を描画するときは、その要素の最初の ... "body" 要素の子のプロパティであり、その子要素の背景を描画してはなりません。このような背景も、ルート要素のみに描画された場合と同じ位置に固定する必要があります。

ページを縮小すると、ブラウザはすべての寸法を再計算します。Ctrlたとえば、 +クリックするたびに-ページが 20% 縮小するとします。Ctrl次に、すべてのテキストが縮小されます。その高さは、 +-クリックの影響を受けるフォントサイズに依存するため、それに応じて<p>、高さが高さに依存するため#container、#wrapperすべてが縮小されtextます。しかしbody、両方とも+クリックの影響を受けない の高htmlさに依存する高さを持っています。これが、最終的にこれを取得する理由です。 windowCtrl-ズームアウトしたページ

その場合、幅と高さの動作に違いはありません。ブラウザウィンドウの幅よりも小さいことが判明した を設定width: 960px;したため、水平方向の寸法で同じ問題が発生することはなく、オーバーフローは発生しません。#containerの幅が本体の幅を超えている場合、次の#containerように表示されます。 同じ問題ですが、幅があります

これはすべて正常で予期される動作であり、ここで解決することは何もありません。

于 2012-08-16T22:07:08.157 に答える
1

要素がブラウザー ウィンドウに対して相対的な場合、高さを 100% に設定することはできないためです。これは、スクロールによってブラウザ ウィンドウが無限に大きくなる可能性があるためです。固定の高さを設定するか、高さを設定して、その中にあるものすべてに拡張する必要があります。

ただしwidth: 100%;、完全に有効です。

また、有効な html タグを使用する必要があります。<wrapper> と <container> を使用する代わりに、css でクラスを作成します。クラス名は、ピリオドで始まることによって宣言されます。

.container{
width: 100%;
}

<div class="container"></div>

幸運を、

-ブライアン

于 2012-08-16T21:07:39.967 に答える