メッセージ
CSSでフッターを一番下に表示させる
コーディングをしていると、たまにフッターの下が余白でスカスカになってしまうことがあります。
これはコンテンツの内容が不十分なために起きてしまう現象なのですが、
これが結構気になります。
それをCSSを使って解決したいと思います。
まずHTML上では、
-----------------------------
<body>
<div id="container">
<div id="main">
/*ここにヘッダーや、コンテンツを配置*/
</div><!--main終わり-->
</div><!--wrap終わり-->
<div id="footer">
</div><!--footer終わり-->
</body>
-----------------------------
次にCSS上では、
(※フッターを縦50xとした場合)
-----------------------------
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 50px;}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
}
-----------------------------
padiingとmarginの関係から
mainの下に余白をとり、
その余白にフッターを入れてることになります。
min-heightは幅の最小値指定のCSSです。
IE6では非対応なのですが、
height100%とheight:autoを加えることにより、
実現しています。
これはコンテンツの内容が不十分なために起きてしまう現象なのですが、
これが結構気になります。
それをCSSを使って解決したいと思います。
まずHTML上では、
-----------------------------
<body>
<div id="container">
<div id="main">
/*ここにヘッダーや、コンテンツを配置*/
</div><!--main終わり-->
</div><!--wrap終わり-->
<div id="footer">
</div><!--footer終わり-->
</body>
-----------------------------
次にCSS上では、
(※フッターを縦50xとした場合)
-----------------------------
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 50px;}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
}
-----------------------------
padiingとmarginの関係から
mainの下に余白をとり、
その余白にフッターを入れてることになります。
min-heightは幅の最小値指定のCSSです。
IE6では非対応なのですが、
height100%とheight:autoを加えることにより、
実現しています。
