cssで背景を固定配置にする

090722

今日は伊藤商店のwebを作って必要だった、
cssでフッターを固定する場合のメモ。

HTMLソース

[html]
<body>
<div id="contents">
<h1>ほげ</h1>
<p>hogeのコンテンツだよ。</p>
</div>

<div class="footer">
hoge-Footer contents
</div>
</body>
[/html]

CSSソース

[css]
html, body {
height: 100%;
}
#contents {
min-height: 100%;
height: auto !important;
height: 100%; /* ie用に設定 */
margin: 0 auto -100px;
/* class=&quot;footer&quot;と同じ高さ(100px)の負の値を入力 */
}

.footer {
height: 100px;
/*適当に色でもつけてみる*/
background-color:#666666;
}
[/css]

コンテンツの内容によっては、IE6などブラウザで、
精度がかなり落ちてしまうので微調整が必要。
他にもJSなどでできるようなので、後で試してみようと思う。