ブラウザ全体を埋めるブロックレベルの要素について window_html/css_WEB-ITnose

ページ上に表示できるようにブロック レベルの要素のサイズを設定する必要があることがよくあります。最も一般的なのは、特定の値を設定することです。

たとえば、ページ上に 200px*200px の背景がピンクの正方形を表示します

...#mydiv{    width:200px;    height:200px;background-color:pink}...<div id="mydiv"></div>...

div をブラウザウィンドウ全体に表示したい場合はどうすればよいでしょうか?

1. ウィンドウのサイズを取得し、その値を div の幅と高さに割り当てます。 (JavaScriptで実装可能)

2. height:100%;width:100%;

このように直接使用すると、期待した効果がまったく得られないことがわかります。 、サポート部分 それでも div 内のテキストに依存します

ブラウザは幅を計算するときにブラウザウィンドウの幅を参照します。幅のデフォルト値を設定しない場合、ブラウザは水平幅全体を埋めるようにページ コンテンツを自動的に並べて表示します。

しかし

コンテンツがビューポートの範囲を超えない限り (スクロール バーが表示される場合)、ブラウザはコンテンツの高さをまったく計算しません。または、ページ全体の絶対的な高さを設定します。そうしないと、ブラウザはコンテンツを単に積み上げていき、ページの高さをまったく考慮する必要がなくなります。ページにはデフォルトの高さ値がないため、要素の高さをパーセントの高さに設定すると、親要素の高さを取得できないため、独自の高さを計算できません。

言い換えると、親要素の高さは単なるデフォルト値です:

height: auto;

。このようなデフォルト値に基づいて高さのパーセンテージを計算するようにブラウザに依頼すると、未定義の結果しか得られません。つまり、null 値であり、ブラウザはこの値に対していかなる反応も行いません。

つまり、要素の高さのパーセンテージ

height: 100%; を機能させるには、この要素のすべての親要素の高さに有効な値を設定する必要があります。

例: body には子要素 div が 1 つだけあり、この div の親要素はすべて次のとおりです: body と html

...#mydiv{    width:100%;    height:100%;background-color:pink;}...<div id="mydiv">div</div>...

表示効果: