css_html/css_WEB-ITnose での Div の幅と高さの 100% 設定

ご存知のとおり、DIV のサイズを設定するには幅と高さの 2 つの属性があります。以前、DIV を学習していたとき、DIV I に幅または高さを 100% 設定するたびに非常に混乱しました。 100%の幅（高さ）が明確ではありませんでした。幅と高さはどれくらいですか？これを100％どこで入手しましたか？今日のトピックは div の 100% の高さについてです。

実際、div width|width100% と div height|height100% がどのように実装されるかを理解するには、単純な質問を理解するだけで済みます。つまり、100% のベースは誰なのか、つまり、この 100% は相対的なものであるということです。誰の幅と高さが 100% ですか?

div の 100% は、その上位レベルの div の幅と高さから継承されます。重要な点の 1 つは、div を 100% 表示するように設定するには、上位レベルの div の幅または高さを設定する必要があることです。無効となります。例: 親 div (deman) は幅 300、高さ 200 で、子 div (cc) は幅と高さが 100% に設定されている場合、cc の正確なサイズは親 div (300) のサイズになります。幅は 200、高さは 200)、実験中に、div 表示はそれ自体とその上位レベルの div のパディングとマージンの影響を受けることがわかりますが、実際の幅と高さは影響を受けません。熟考する価値はあります。

div の高さを 100% に設定した場合、その高さは 100% の位置と比較してどこにありますか?

その高さを示すためにその前にコンテナーがなければなりません。この場合、div は前のレベルの高さを 100% 比例して継承できます。残念ながら、ブラウザは通常、デフォルトで 100% ではなく、コンテンツの高さとして解釈します。ただし、html と body: html, body {height: 100%;} の高さを 100% に設定するだけで、div は前のレベルの高さを比例して継承します。何も機能していないように見えます。

同時に、嬉しいのは、この方法で設定した CSS スタイルはブラウザーの互換性の問題がなく、IE5.5、IE6、IE7、IE8、Firefox で正常に表示できることです。

次に、次のスタイルを使用して、ページ全体を埋めるように Div を設定できます:

注意すべき点は、HTML レベルの要素のデフォルトの幅は 100%、つまり行全体ですが、高さは 100% ではなく 1 行だけであることです。

したがって、ページ全体を埋めたい場合は、高さを明示的に 100% に設定する必要があります。