固定ヘッダーとフッターを使用して高さ 100% 最小の CSS レイアウトを作成するにはどうすればよいですか?

最小高さ 100% CSS レイアウト: アダプティブコンテンツ高さのロックを解除

要素が変化しても最小の高さを維持する、流動的で適応可能なレイアウトを実現します。ブラウザのコンテキストが課題になる場合があります。このチュートリアルでは、特に固定高さのヘッダーとフッターを含むシナリオで、この問題に取り組むための優れた CSS レイアウト手法に焦点を当てます。

最小高さの提案

の基礎このアプローチは、#container でシンボル化されたコンテナ要素に 100% の最小の高さを割り当てることにあります。これにより、コンテンツが利用可能なスペースを埋めるのに不十分な場合でも、要素はヘッダーとフッターの間の高さ全体を占めるように拡張されます。

相対位置

#container 要素は相対位置を想定しているため、コンテンツの長さに関係なく、#footer 要素をその下部に固定したままにすることができます。前に指定した 100% の最小高さにより、コンテンツによって #container が強制的に垂直方向に拡張される場合でも、適切な位置が保証されます。

Padding-bottom Adjustment

#content はもう存在しないため、相対的な位置決めによる通常のフローの一部であるため、padding-bottom を使用して絶対的な #footer 用のスペースを作成します。このパディングは、要素のスクロール高さに貢献し、フッターがその上のコンテンツと重なるのを防ぎます。

使用例

次の CSS コードは、このレイアウト手法の例です。

div#container {
    position: relative;
    min-height: 100%;
}

div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

div#content {
    padding-bottom: 5em; /* Provide space for the footer */
}

レスポンシブ適応

ブラウザ ウィンドウのサイズ変更やテキスト サイズの変更に応じて、レイアウトがシームレスに適応します。コンテナーはコンテンツに合わせて高さを調整しますが、フッターは下部に固定されたままになります。これにより、ユーザーにとって一貫した視覚的に楽しいエクスペリエンスが保証されます。

以上が固定ヘッダーとフッターを使用して高さ 100% 最小の CSS レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。