固定ヘッダーを使用してページの下部にフッターを配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

固定ヘッダーを使用してページの下部にフッターを配置するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-09 03:33:18

オリジナル

213 人が閲覧しました

How to Keep a Footer at the Bottom of the Page with a Fixed Header?

固定ヘッダーを使用してフッターをページの下部に維持する

問題:

フッターをページの一番下、他のすべてのコンテンツの下に配置し、そのままの位置に保ちたいと考えています。スクロールするときに、固定位置のように画面に張り付くことなく、このアプローチは、ヘッダーとフッターの両方の高さが固定されているシナリオに適しています。これには以下が含まれます:

の高さの設定そして次のステップが確実に機能するように、100% に設定します。

を指定します。最小高さ 100% のページコンテンツ (#content) が含まれます。フッターの高さに等しい負の margin-bottom を #content に適用し、その位置を相対に設定することで、フッターを上に引き上げます。
#content の最後に spacer 要素を追加するか、padding-bottom と box-sizing: border-box の組み合わせを使用して、コンテンツが #content の後ろに隠れないようにします。 footer.

ヘッダーの追加

フッターの位置を維持しながらヘッダーを含めるには:

ヘッダーを#content (通常のフローのままにする必要がある場合)。
ヘッダーに絶対位置指定が必要な場合は、追加します。コンテンツの重なりを防ぐには、スペーサーを使用するか、padding-top と box-sizing: border-box を使用します。

考慮事項:

最新のブラウザーのサポートボックス-サイズ設定: ボーダーボックスですが、より広範なサポートが必要な場合は、スペーサーを使用してください。

ヘッダーとこのメソッドが機能するためにフッターの高さは固定されています。

以上が固定ヘッダーを使用してページの下部にフッターを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。