スクロール中にページの下部に Div を維持するにはどうすればよいですか?

スクロールするコンテンツでページ下部の Div を維持する

スクロールしてもフッターがページの下部に残る効果を実現するには、特定のアプローチ。望ましい結果はページの下部に div をプッシュするのと似ていますが、解決策は異なります。

鍵となるのは、さまざまな CSS 配置オプションの動作を理解することです。この場合、position:Absolute を使用してフッターをビューポートの下部に移動しています。ただし、この位置はビューポートに対して固定されたままとなるため、コンテンツがスクロールしてもフッターは同じ位置に留まります。

div がページのコンテンツの下部に残るようにするには、position:fixed を指定します。代わりに、

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

を使用する必要があります。この変更により、コンテンツがオーバーフローするかどうかに関係なく、フッターはページの下部に固定されます。コンテンツとともにスクロールし、表示されているすべての要素の下部に残ります。この動作は、Stack Overflow などの Web サイトでよく見られます。ページ上に多数の質問と回答が存在する場合でも、フッターは下部に残ります。

position:fixed を使用すると、div は下部に残ります。ページのコンテンツ。コンテンツがスクロールするにつれてページの動的な高さに適応し、目的のレイアウトを維持します。

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