HTML と本体の高さ: 100% と最小の高さ: 100% – どちらを使用する必要がありますか?

HTML および Body 要素の高さと最小の高さ: 違いを理解する

Web デザインでは、ブラウザー ウィンドウを満たすレイアウトを実現することが重要な場合があります。開発者は、ウィンドウ全体のサイズまで拡張されることを期待して、html 要素と body 要素の高さを 100% に設定することがよくあります。ただし、特定のシナリオでは、このアプローチは失敗します。この記事は、この問題を明らかにし、推奨される解決策を提供することを目的としています。

高さ: 100% または最小高さ: 100% が失敗する理由

HTML と本文の両方を高さ: 100 に設定する% ボディ要素がビューポートの高さを超えて拡大するのを防ぎます。これにより、ページの下部に顕著なギャップが残り、多くの場合、望ましくない結果になります。

一方、両方の要素で min-height: 100% は機能しません。これは、パーセンテージを伴う min-height が適用されないためです。 HTML に明示的な高さが定義されていない限り、body 要素に追加します。

推奨される解決策: HTML では高さ: 100%、HTML では最小高さ: 100% Body

これらの制限に対処するには、html を height: 100% に設定し、body を min-height: 100% に設定することをお勧めします。これにより、

• html がビューポートの高さに拡張されます。
• body は、最小の高さ 100% を維持しながら、ページ コンテンツに合わせて拡張されます。

背景画像: 特殊なケース

ブラウザ ウィンドウを満たす HTML と本文に背景画像を適用する場合、どちらも適用されません。 height: 100% または min-height: 100% は効果的に機能します。代わりに、次のアプローチを使用することをお勧めします:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

これにより、背景画像が隙間やオーバーフローなくブラウザ ウィンドウ全体を覆うことができます。

以上がHTML と本体の高さ: 100% と最小の高さ: 100% – どちらを使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。