フッターが常に画面最下部に表示されるように

質問

通常ページが縦長の場合フッターはスクロールしないと見えません。

常に画面最下部にフッターを表示するにはどうしたらいいでしょうか・・？

【条件】

・フレームは使わない。（SEO対策のため）
・モニターのサイズに関わらず、ブラウザの表示サイズに関わらず常に表示領域の最下部にフッターがくる
・javascriptで追いかけてくる形ではなく下にぴったり（動かずに）表示される
ちなみにjavascriptではこのような形です。
http://www.view-bridge.com/sample/

ご存知の方、何か良いアイデアをお持ちの方どうぞお助け下さいませ！！
よろしくお願いします！！

回答No.2

atom78 · ベストアンサー

しばらく前に質問にあるようなレイアウトを組みました。
ソースとしては以下のようになります。

CSS

html {height:100%;}

body {height:100%;}

#wrap {
width:100%;
min-height:100%;
text-align:left;
margin:0 auto;
padding:0;
position:relative;
}

body > #wrap {height:auto;}

#contents [
padding-bottom:20px;/* #footerのheight分を指定 */
}

#footer {
width:100%;
height:20px;
position:absolute;
bottom:0;
}

HTML

<div id="wrap">
　<div id="contents">
　コンテンツ包含ブロック
　</div>
　<div id="footer">
　</div>
</div>

#wrapのheightを算出する基準を作るためにhtmlとbodyにheight:100%を指定することがポイントです。
次に、#wrapにposition:relativeを与えて、それに含まれる#footerをposition:abusoluteでbottomに固定します。

これだけだといわゆるモダンブラウザにしか対応しませんが、CSSハック使えばIE6でも同様の表示は可能です。

回答No.1

SAYKA

position:fixed
を使う事になるね
http://www.tohoho-web.com/css/reference.htm#position

勿論CSSを使うから非対応ブラウザでは無意味だね。
具体的にはIE6対応したいなら、フレームも不可ならjsで追いかける以外で実現方法は無くなる事になるんじゃないかな。