0

十分なコンテンツがない場合は、position: fixed と bottom 0 のように、フッターを下の画面に配置します。しかし、より多くのコンテンツがある場合、コンテンツの後にフッターが必要で、下部に固定されません。

HTML

<div id="header">Header</div>
<div id="content">
    Bla
</div>
<div id="footer">sdfasdf</div>

CSS

#header { background-color: gray; padding: 10px;}
#footer { background-color: black; padding: 10px;  color:white;}

http://jsfiddle.net/FJWZu/

この場合、jsfiddle を見ると、フッターが一番下にあることがわかります。

JSなしでこれを達成する方法はありますか?

4

4 に答える 4

1

http://css-tricks.com/snippets/css/sticky-footer/それはあなたが望むものだと思います。粘着性のあるフッター。`コンテンツを min-height: 100% に設定する必要があります。最終的に高さ: 100% に設定し、html の本文を高さ: 100% に設定します。それが役に立てば幸い

于 2013-08-05T08:12:54.920 に答える
1

Google でレスポンシブ デザインを検索すると、そのような行動についての洞察が得られるかもしれません。

たとえば、Twitter Bootstrapを使用すると、そのようなことができます。Twitter Bootstrap に基づい
たSticky footerがあります。これは、探していることを実行しているようです。

于 2013-08-05T08:20:50.297 に答える
0

ええ、可能です。これはポジショニングでのみ使用cssしabsoluteます。

http://jsfiddle.net/FJWZu/3/

于 2013-08-05T08:11:43.703 に答える