「position:fixed」を使用せずに、スクロール可能なページコンテンツの下部に Div を配置するにはどうすればよいですか?

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

Div をビューポートの下部に固定する従来の方法とは異なり、フッターが残る解決策を模索します。スクロールバーが存在する場合でも、コンテンツの下部に固定されます。問題を複雑にしているのは、#footer div は固定位置を示すべきではないことです。

これを実現するには、次の CSS を通じて必要な正確な機能を実現できます。

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

位置: 固定は、ページがスクロールしても所定の位置に留まる要素で、フッターがコンテンツの下部に固定されたままになります。

bottom を次のように設定することで、 0 の場合、フッターをウィンドウの最下端に​​固定し、ページ コンテンツのベースと位置合わせされたままになります。

最後に、width: 100% を指定すると、フッターがページ幅全体に広がり、効果的に目的の効果が得られます。 .

ライブ デモンストレーションは次のとおりです: https://jsfiddle.net/uw8f9/

以上が「position:fixed」を使用せずに、スクロール可能なページコンテンツの下部に Div を配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。