ホームページ > ウェブフロントエンド > CSSチュートリアル > 固定ヘッダーを使用してページの下部にフッターを配置するにはどうすればよいですか?

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

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.
  1. ヘッダーの追加
  2. フッターの位置を維持しながらヘッダーを含めるには:
ヘッダーを#content (通常のフローのままにする必要がある場合)。

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

考慮事項:
  1. 最新のブラウザーのサポート ボックス-サイズ設定: ボーダーボックスですが、より広範なサポートが必要な場合は、スペーサーを使用してください。
ヘッダーとこのメソッドが機能するためにフッターの高さは固定されています。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート