☰

スクロールバーがあってもdivを常にページコンテンツの下部に表示する 質問する

tag-icon • tag-icon css positioning css-position footer
スクロールバーがあってもdivを常にページコンテンツの下部に表示する 質問する

次の質問とは逆の動作を実装したいと考えています。CSS ページの下部に Div をプッシュするつまり、コンテンツがスクロールバーに溢れる場合、Stack Overflow のようにフッターをページの下部に表示したいのです。

divid="footer"と次の CSS があります。

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

これにより、div がビューポートの下部に移動しますが、ページを下にスクロールしても要素はそこに残るため、下部ではなくなります。

コンテンツがオーバーフローした場合でも、div がページのコンテンツの下部に留まるようにするにはどうすればよいでしょうか。固定配置ではなく、要素がすべてのコンテンツの下部に配置されることを期待しています。

画像：例

ベストアンサー1

これはまさに次position: fixedの目的で設計されたものです:

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

これがそのフィドルです:http://jsfiddle.net/uw8f9/

おすすめ記事