今日は伊藤商店の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="footer"と同じ高さ(100px)の負の値を入力 */
}
.footer {
height: 100px;
/*適当に色でもつけてみる*/
background-color:#666666;
}
[/css]
コンテンツの内容によっては、IE6などブラウザで、
精度がかなり落ちてしまうので微調整が必要。
他にもJSなどでできるようなので、後で試してみようと思う。