CSSでフッターを常に底配置
Posted by admin | Filed under css
調子に乗って連発でCSSネタを
本文の内容が少なくてフッターが上にきすぎ！
どの解像度のモニターでもfooterがブラウザウインドウの一番下にくっついてほしい時！
そんなあなたに朗報。
まずはCSS側
html {
height:100%;
}
body {
height:100%;
}
#container {
position:relative;
min-height: 100%;
}
#main {
padding-bottom:10px;
}
#footer {
position:absolute;
bottom:0px;
height:30px;
width:100%;
}
そしてｈｔｍｌ側
<div id="container">
<div id="main">
<h1>CSSでフッターを常に下に配置</h1>
<p>本文はここに</p>
</div>
<div id="footer">フッターの内容をここに記述</div>
</div>
よく使う割にコピペで済ますからわすれちゃうんだよねぇ。
ソース見れば思い出すんだけどさ。
Tags: css
