ホームページ >ウェブフロントエンド >CSSチュートリアル >スクロールしてもページの下部にフッターを表示し続けるにはどうすればよいですか?

スクロールしてもページの下部にフッターを表示し続けるにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-15 14:41:14523ブラウズ

How to Keep a Footer at the Bottom of the Page Even When Scrolling?

オーバーフローしたスクロールバーを使用して Div をコンテンツの下部に配置する

ページ コンテンツがビューポートを超えて拡張されると、開発者はフッターがビューポートの上に表示される問題に遭遇することがよくあります。ページの下の境界線。この動作を解決するには、提供されている画像で説明されている実装を検討してください。

最初に使用された CSS スニペットは、position:Absolute と Bottom:30px を特徴としており、div をビューポートの下部に配置します。ただし、スクロールすると、div は静止したままになり、コンテンツの下限から切り離されます。

解決策

div をコンテンツの下部に永続的に固定するには、最適なアプローチが必要です。固定ポジショニングの採用。修正された CSS は次のとおりです:

この変更により、目的の効果が得られます。 div は、スクロールに関係なく、すべてのコンテンツの下部に固定されたままになります。提供されているフィドルは、この動作を示しています: http://jsfiddle.net/uw8f9/.

以上がスクロールしてもページの下部にフッターを表示し続けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。