記事内に広告が含まれています。

CSSでフッターをページ最下部にくっつけて固定する方法

Jun 27, 2016

CSS,HTML,JS , コーディング

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

See the Pen WWQxbE by natsuki (@natsukimemo) on CodePen.

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

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

See the Pen pBjbjL by natsuki (@natsukimemo) on CodePen.

手順は下記の3つです。

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

bodyタグの直後にdiv.wrapで全ての要素を囲う。
（クラス名は好きなものでOK。）
div.wrapにposition: relativeを指定する。
footerに、position:absolute;とbottom:0;を指定する。

コードは下記です。

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

上記htmlの2行目と10行目、bodyタグの中の要素を全てdiv.wrapの入れ子にします。

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:30px;
}
footer{
    position:absolute;
    bottom:0;
    background-color:#ff0000;
    width:100%;
    height:30px;
}

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を指定しておくとコンテンツとフッターが被らなくなります。