css - min-height、sticky-footer、またはjavascriptを使用せずに、短いページの下部にフッターを含める方法

Question

PHPに含まれる、すべて同じフッターを持つ60ページがあります。コンテンツの量は、高さ 300 ピクセルから 2000 ピクセル以上までさまざまです。これが可能だとは思いませんが、ページがウィンドウよりも短い場合はフッターをブラウザーウィンドウの下部に配置し、それ以外の場合は通常どおり (下部にプッシュ) 動作させることができれば素晴らしいと思います。 CSSだけで。ありがとう。

Answer 1

この投稿はかなり古いことは知っていますが、これとまったく同じことに関する優れたリソースを見つけました。

http://ryanfait.com/sticky-footer/

ここにCSSがあります：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

幸運を。

Answer 2

IE7でもフッターがコンテンツが少ないと下に留まり、コンテンツが多いと下に引っ張られることを狙った記事はこちら

http://snipplr.com/view/15334/

Answer 3

私はあなたのコンテンツに500pxの最小高さを与えてみます...

#content {
   min-height: 500px;
}

そうすれば、コンテンツが 300 ピクセルしかない場合でも、500 ピクセル (または必要に応じてそれ以上) を使用すると、フッターが十分に下に移動して最下部に表示されるようになります。

Answer 4

これをCSSに追加してみてください

#footer {position: fixed; bottom: 0;}