固定ヘッダーを持つスティッキーフッターを作成するにはどうすればよいですか?

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

Web ページを作成するときに、フッターを下部に配置するという課題が発生する場合があります。固定ヘッダーを維持しながらページの一部を削除します。これにより、ページのコンテンツに関係なくフッターが表示されたままになります。この効果を実現する方法を詳しく見てみましょう。

ヘッダーの位置を固定にすると、スクロール時にヘッダーが画面上で静止したままになりますが、フッターがページの下部に自動的に配置されるわけではありません。代わりに、フッターは、top プロパティで定義されているのと同じ垂直位置に残ります。

これを修正するには、ビューポートではなく、ページ コンテンツに対して相対的にフッターを配置する必要があります。これにより、ページ上のコンテンツの量に関係なく、フッターが常にページの下部に配置されるようになります。

Ryan Fait の Sticky Footer Method

作成のための確立されたアプローチの 1 つスティッキーフッターは Ryan Fait によって提案された方法です。この方法は、ヘッダーとフッターの両方の高さが固定されている場合に適用できます。

手順:

1. の高さを設定します。そして
2. メイン コンテンツ コンテナ (#content) の高さを最小 100% に設定します。これにより、フッターがページの下部に移動します。
3. コンテンツがフッターの後ろにはみ出さないようにするには、#content 要素にフッターの高さと同じ負の margin-bottom を指定します。
4. position:relative を使用してフッターをコンテンツ コンテナ (#content) に対して相対的に配置し、フッターがコンテンツの上に表示されるようにします。
5. 最後にスペーサー要素を追加します。 #content 要素の値を変更するか、padding-bottom と box-sizing: border-box の組み合わせを利用してフッターの高さを補正します。これにより、コンテンツ領域が大きくなったときにコンテンツがフッターと重なることがなくなります。

ヘッダーの追加

1. ヘッダーを通常のフローに残す必要がある場合は、ヘッダーを次のフローに追加するだけです。 #content 要素。
2. ヘッダーを絶対に配置する必要がある場合は、#content 要素を下に押して重複を防ぎます。これは、#content の先頭にある spacer 要素を使用するか、padding-top と box-sizing: border-box を利用することで実現できます。

最新のブラウザーのほとんどは box- をサポートしていることに注意することが重要です。サイズ設定: ボーダーボックス、スペーサー要素を使用すると、より幅広いブラウザ互換性が提供されます。

以上が固定ヘッダーを持つスティッキーフッターを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。