CSSで擬似フレームにトライ中で、まずは、フッターを固定する方法を自分なりにまとめました。
まずは、一般的なホームページの書き方から。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでフッターを固定する 第１歩</title>
<style type="text/css">
body {
margin:0px;
}
#header {
height:100px;
background:#ccffcc;
}
#main {
background:#ffff99;
}
#footer {
height:80px;
background:#ffcc99;
}
</style>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ
</div>
<div id="footer">
フッター
</div>
</body>
</html>
サンプルはこちらです。
当然ですが、このままだと、フッターはブラウザの下に固定されません。
フッターをブラウザの下に固定するには、次のコードのように、ヘッダーとメイン部分をdivで囲み、それに対してスタイルを指定します。bodyとhtmlにも height:100%; を指定します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでフッターを固定する 第２歩</title>
<style type="text/css">
body {
margin:0px;
height:100%;
}
html {
height:100%;
}
#container {
min-height:100%;
margin-bottom:-80px;
height:auto !important;
height:100%;
}
#header {
height:100px;
background:#ccffcc;
}
#main {
background:#ffff99;
}
#footer {
height:80px;
background:#ffcc99;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ
</div>
</div>
<div id="footer">
フッター
</div>
</body>
</html>
#containerの margin-bottom:-80px; はフッターの高さと同じにします。
サンプルはこちらです。
これで、#mainのdivの部分（黄色い部分）が短くても、フッターがブラウザの下に固定化されます。
この状態でブラウザの縦を小さくしていくと、オレンジ色のフッターが、黄色のメイン部分や緑のヘッダー部分に覆いかぶさってしまいます。これでは、ちょっとよろしくない。
そこで、これを避けるために、次のコードを追加します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでフッターを固定する 第３歩</title>
<style type="text/css">
body {
margin:0px;
height:100%;
}
html {
height:100%;
}
#container {
min-height:100%;
margin-bottom:-80px;
height:auto !important;
height:100%;
}
#header {
height:100px;
background:#ccffcc;
}
#main {
background:#ffff99;
}
#footer-space {
height:80px;
background:#99ccff;
}
#footer {
height:80px;
background:#ffcc99;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ
</div>
<div id="footer-space"></div>
</div>
<div id="footer">
フッター
</div>
</body>
</html>
ヘッダーとメイン部分を囲ったdivの最後に footer-space というdivを１つ追加して、height:80px; を指定します。この高さはフッターの高さと同じにします。
こうすることで、ブラウザを縮めた際、フッターが覆いかぶさるのを防げます。
サンプルはこちらです。
分かりやすいように #footer-space は青色になってます。
確認はIEだけにCSSを適用同様、WindowsXP IE6、WindowsXP Firefox3、WindowsVista IE7 で行いました。Macは持ってないので確認してません。Macの結果をいただけたらうれしいです。
参考にさせていただいたブログがいくつかあったのですが、スイマセン、いろいろ見ていたため、URLを把握しきれていませんでした。 m(_ _)m
■2008.11.2追記
一番外側のdiv（#container、#footer）にmarginを付けると、常にスクロールバーが表示される等の現象があるので、marginは避けたほうがいいと思います。
また、コンテンツ全体を中央寄せする場合、大きなdivに対して margin:auto; でセンタリングしますが、この場合、そのdivが、#container、#footerの外側にある場合、そのdivに対しても、height:100%; を指定する必要があります。
参考サイト
このページは中央寄せのため、一番外側に #body があります。#container、#footer はその内側にあるので、#body にも height:100%; を指定しています。
コメントする