スクロールするコンテンツでページ下部の Div を維持する
スクロールしてもフッターがページの下部に残る効果を実現するには、特定のアプローチ。望ましい結果はページの下部に div をプッシュするのと似ていますが、解決策は異なります。
鍵となるのは、さまざまな CSS 配置オプションの動作を理解することです。この場合、position:Absolute を使用してフッターをビューポートの下部に移動しています。ただし、この位置はビューポートに対して固定されたままとなるため、コンテンツがスクロールしてもフッターは同じ位置に留まります。
div がページのコンテンツの下部に残るようにするには、position:fixed を指定します。代わりに、
#footer { position: fixed; bottom: 0; width: 100%; }
を使用する必要があります。この変更により、コンテンツがオーバーフローするかどうかに関係なく、フッターはページの下部に固定されます。コンテンツとともにスクロールし、表示されているすべての要素の下部に残ります。この動作は、Stack Overflow などの Web サイトでよく見られます。ページ上に多数の質問と回答が存在する場合でも、フッターは下部に残ります。
position:fixed を使用すると、div は下部に残ります。ページのコンテンツ。コンテンツがスクロールするにつれてページの動的な高さに適応し、目的のレイアウトを維持します。
以上がスクロール中にページの下部に Div を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。