コンテナ Div で 100% の高さを使用すると、IE で内部 Div が最大の高さに達しないのはなぜですか?

Firefox と IE 間での Div の配置における CSS 高さの不具合

このシナリオの目的は、2 つの内部コンポーネントをカプセル化するコンテナ div を作成することです。 div は、その中の幅と高さの両方が 100% に及びます。これは Firefox では意図したとおりに機能しますが、IE では内部 div がコンテナの完全な高さに到達できず、含まれているテキストの高さのままになるという奇妙な動作が見られます。

この矛盾は、次の概念に起因しています。 CSS 計算における「含むブロック」。パーセンテージはビューポートを基準とするのではなく、「含まれるブロック」の高さを基準にして計算されます。この場合、#container div.

提供された CSS では、#container には明示的な高さの指定がありません。デフォルトでは「自動」です。これは、その高さが内部のコンテンツに基づいて決定されることを意味します。その後、内部 div の 100% の高さプロパティは、テキストの内容に基づいて変化するこの自動高さに相対的なものになります。

この問題を修正するには、次の調整が必要です:

1. #container の明示的な高さの値を宣言して、包含ブロックを確立します:

   <code class="css">#container {
     height: 100%;
   }</code>

2. 最初の包含ブロックはブラウザーであるため、html と本文の両方の高さを設定します。 dependent:

   <code class="css">html, body {
     height: 100%;
   }</code>

これらの変更により、内部 div が #container の高さ全体とビューポートの 100% にまたがるようになり、IE で観察された高さの問題が解決されます。

以上がコンテナ Div で 100% の高さを使用すると、IE で内部 Div が最大の高さに達しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。