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

固定ヘッダーを使用してページの下部にフッターを配置する方法

フッターを下部に配置するにはページの固定ヘッダーを持ちながらも、フッターを配置する「position:fixed」に依存しないアプローチを採用する必要があります。

Ryan Fait のメソッドの活用

Ryan Fait のアプローチは簡単で、ヘッダーとフッターの両方が存在するシナリオでは効果的です。固定高さの:
2. 両方の高さを設定しますそして

3. #footer をページの下に押し出すには、#content 要素の高さを最小 100% にします。
4. フッターを引き出すには、#content の負の margin-bottom を使用します。
5. フッターが確実に表示されるように、#content を基準にしてフッターの位置を調整します。 top.
#content にスペーサーを追加するか、padding-bottom と box-sizing を使用して、余分なコンテンツを管理し、フッターと重ならないようにします。

Incorporatingヘッダー

ヘッダーを通常のフローに残す必要がある場合は、ヘッダーを内部に追加するだけです ＃コンテンツ。絶対に配置するには、スペーサーを使用するか、padding-top と box-sizing を組み合わせて使用​​します。

互換性のあるブラウザと代替ブラウザ

最新のブラウザ サポート ボックス- サイズ: ボーダーボックス。より幅広いブラウザーをサポートするには、代わりにスペーサー要素の使用を検討してください。

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