高さまたは最小高さ: HTML および Body 要素のレイアウトにはどちらが最適ですか?

レイアウト内の HTML および本文要素の高さと最小高さ

レイアウトを設定するとき、開発者は通常、次のいずれかの高さを使用します: 100%または min-height: html 要素と body 要素の場合は 100%。ただし、これらの方法は特定のシナリオでは失敗することが多く、デザイナーはどちらのアプローチが望ましいか迷うことになります。

高さ: 100%

HTML と本文の両方で高さ: 100% を使用する要素はビューポートの高さに固定します。この方法では、ブラウザ ウィンドウ全体に背景画像を効果的に適用します。ただし、コンテンツの成長に伴ってボディが拡大するのを防ぎ、ビューポートの折り目の下に不要な隙間ができます。

最小高さ: 100%

最小高さの指定: html 要素と body 要素の両方を 100% に設定すると、body がビューポートの高さまで拡張できるようになり、コンテンツのスクロールが可能になります。ただし、この方法は、HTML に明示的な高さが指定されている場合にのみ機能します。

推奨されるアプローチ

ブラウザ ウィンドウを満たす背景画像の場合、推奨される解決策は次のとおりです。

html {
  height: 100%;
}

body {
  min-height: 100%;
}

このアプローチにより、HTML はビューポートの高さと本文を決定し、必要に応じて拡張することができ、ギャップとコンテンツの両方を回避できます。 overflow.

追加の考慮事項

HTML と本文には固有の高さが不足しているため、デフォルトで明示的な height: auto が割り当てられます。 HTML はビューポートから高さを取得するため、これらの要素に適用される背景画像は HTML 内で明示的に指定する必要があります。

HTML の高さを明示的に指定しない min-height: 100% は予期しない動作を引き起こす可能性があるため、CSS 仕様 ( CSS2.1 のセクション 10) では、これらの技術的事項について徹底的に説明しています。

以上が高さまたは最小高さ: HTML および Body 要素のレイアウトにはどちらが最適ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。