HTML と本文の高さ: `height: 100%` と `min-height: 100%` – どちらを使用するべきですか?

HTML 要素と Body 要素の高さと最小の高さ

レイアウトを設計するとき、多くの開発者は HTML 要素と Body 要素の高さを設定します100%まで。ただし、このアプローチでは問題が発生する場合があります。この記事では、これらの要素の height: 100% と min-height: 100% の違いを調査し、その使用法に関する推奨事項を示します。

背景、HTML、本文要素

html 要素と body 要素の両方に固有の高さがありません。デフォルトでは、高さ: 自動に設定されています。これらの要素に高さ: 100% が適用されると、高さはビューポートから決定され、ブラウザ ウィンドウ全体を埋めることができます。

高さ: 100% と最小高さ: 100%

• 高さ: 100%: この設定により、要素の高さを親コンテナの 100% に変更します。これを html と body の両方に適用すると、ビューポート全体を確実に埋めることができますが、この方法では、ビューポートの高さを超えるコンテンツを収容するために body が拡張できなくなり、顕著なギャップが残る可能性があります。
• min-height : 100%: この設定では、要素の最小の高さを設定します。これを HTML と本文の両方に適用すると、必要に応じて本文を拡張できますが、コンテンツが不十分な場合にビューポートを埋めることは保証されません。

推奨: HTML では高さ: 100% を使用します。 and min-height: 100% on body

ブラウザ ウィンドウ全体に広がる背景画像の場合、推奨されるアプローチは次のように設定することです。 HTML では height: 100%、body では min-height: 100%。これにより、HTML がビューポート全体に表示され、背景のキャンバスが提供され、本文は必要に応じて垂直に拡張され、コンテンツが収まるようになります。

以上がHTML と本文の高さ: `height: 100%` と `min-height: 100%` – どちらを使用するべきですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。