CSSでフッターを最下部に固定する方法

ヘッダー、コンテンツ、フッターとHTMLを順にコーディングしただけだと、コンテンツの行数が少ないとフッターがコンテンツのすぐ下にくっついてしまい、画面下部 に余白ができてしまいます。

<body>
<header>ヘッダー</header>
<div id="contents">コンテンツに
    <br>隣接してフッターが
    <br>きてしまいます。
</div>
<footer>フッター</footer>
</body>
*{
    margin:0;
    padding:0;    
}
header{
    width:100%;
    background-color:#F0E68C;
}
div#contents{
    width:100%;
    background-color:#efefef; 
}
footer{
    width:100%;
    background-color:#ff0000;   
}

CSSでフッターを画面の最下部に固定する

CSSでコンテンツの行数にかかわらず、フッターを画面の最下部に固定する方法です。

まずHTMLでは、bodyタグの中の要素を全てdivタグの入れ子にします。(下記2行目と10行目)

<body>
<div id="wrap">
<header>ヘッダー</header>
<div id="contents">
        コンテンツに
    <br>フッターがくっついてきません。
    <br>画面の下部で固定されています。
</div><!--#contents-->
<footer>フッター</footer>
</div><!--#wrap-->
</body>

CSSは下記になります。
※1行目~4行目は、ページの上下にできる余白を削除するCSSです。この記事の趣旨とそれるものなので詳しくはふれません。

*{
margin:0;
padding:0;
}
html,body{
     height:100%;
 }
div#wrap{
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
header{
    background-color:#F0E68C;
}
div#contents{
    background-color:#efefef; 
    padding-bottom:1em;
}
footer{
    position:absolute;
    bottom:0;
    background-color:#ff0000;
    width:100%;
    height:1em;
}

5行目~6行目: htmlとbodyタグにheight:100%を指定します。

8行目~13行目: divタグid名wrapにpositionとmin-heightを指定します。heightはIE6対策に指定しています。

21行目~27行目: footerにpositionとbottom:0を指定します。
heightやwidthは、指定しないとfooter要素内のテキストの幅になります。

前後しますが、17行目~20行目: コンテンツ(idがcontentsのdivタグ要素)にフッターの高さと同じだけpadding-bottomを指定しておくとコンテンツとフッターが被らなく なります。

CSS以外の方法

CSSで固定する他にjsライブラリ『footerFixed.js』というものがあって、とても良いものだそうです。

to-Rさんのブログにリンクされています。【footerをウィンドウ下部に固定する 『footerFixed.js』】