html - フッターが下にくっつかない

Question

私はstruts2アプリケーションに取り組んでいます.jspページを扱っているとき、ページコンテンツがコンテンツの下にフッターフロートが少ない場合、これは非常に悪く見えますが、コンテンツがページよりも多い場合、自動的に下部にフロートします.これは私にとっては問題ありません。どんな助けでも大歓迎です...

cssでフッターに使うコードは…

#footer {
    height:41px;
    background:url(../images/main-bg.png) repeat-x;
    width: 100%;
}

Answer 1

スティッキー フッター (ページの高さに関係なく常にページの下部にある) の場合は、次を使用します。position: fixed;

   #footer {
     height:41px;
     background:url(../images/main-bg.png) repeat-x;
     position: fixed;
     bottom: 0;
     width: 100%;
   }

Answer 2

スクロールの影響を受けないブラウザウィンドウにフッターが常に表示されるようにする場合は、フッターを使用しposition:fixedます。ただし、コンテンツが多く、スクロールが必要な場合でも、フッターがコンテンツと重なる表示領域にとどまると、見栄えが悪くなります。クリーンな解決策は、フッターマークアップをラッパーdivの外側に移動することです。のようなものが良いはずです：

サンプルデモ

CSS-

html, body {
    height: 100%;
}
#wrapper {
    background-color:yellow;
    height: 90%; //sharing the height between wrapper and footer
    margin:0px;
}
#footer {
    background-color:green;
    height: 10%;
    min-height:20px;
    max-height:40px;
}