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

Comments and faves By: Andrew Galloway

フッターの固定はどこのサイトでも行っているようなレイアウトです。

これが簡単なようで意外と難しく、私もサイトを作成したときにかなり嵌まりました。

今回は、このフッター固定の方法をステップバイステップでご紹介します。

※CSSでヘッダーとフッターを常に固定する方法はこちら

フッターの固定方法

HTMLファイルの準備
全体のレイアウトの設定をする
ヘッダー部を作成する
ボディ部を作成する
フッター部を作成する

このように「ヘッダー」「ボディ」「フッター」を順に作成して行きます。
footer

DEMO

１．HTMLファイルの準備

これが、今回使用するHTMLのソースです。

HTML


<html>
    <head> ･･･ </head>
    <body>    
        <div id="contents">        
            <div id="header-bk">
                <div id="header"> ･･･ </div>
            </div>
            <div id="body-bk">        
                <div id="body"> ･･･ </div>
            </div>
            <div id="footer-bk">
                <div id="footer"> ･･･ </div>
            </div>
        </div>
    </body>
</html>

２．全体のレイアウトの設定をする

CSS

/* html,bodyタグの設定 */
html, body{
	margin: 0;	/* 余白の削除 */
	padding: 0;	/* 余白の削除 */
	height: 100%;	/* 縦の高さを100% */
	width: 100%;	/* 横の幅を100% */
}
/* 全体を囲う大枠 */
div#contents {
	background-color: #999;
	position: relative;		/* フッター部の配置用に定義 */
	min-height: 100%;		/* 縦の表示領域を100% */
}

まずは下準備として全体のレイアウトの設定を行います。

html,bodyタグに対して100%の指定して表示領域を取得します。これでhtml,bodyタグの子要素は画面の表示領域を全て使用できます。

「min-height:100%」はスクロールが発生しないような内容の少ない画面でも一番下まで「div#contents」の領域とするために指定します。

「position:relative」はフッターの絶対位置指定に使用すため、ここで定義しておきます。

３．ヘッダー部を作成する

CSS

/* ヘッダーの背景 */
div#header-bk { 
	background-color:#444;  /* 背景色(黒) */
	padding:10px 0 0;       /* 上から10px分余白をあける */
	height:140px;           /* 縦の高さ140px */
	width:100%;             /* 横の幅を100% */
}
/* ヘッダーの表示領域 */
div#header { 
	border: 5px solid #fff; /* 表示領域を白枠で囲う */
	height: 120px;  /* 縦の表示領域120px */
	width: 970px;   /* 横の幅970px */
	margin: auto;   /* 中央揃え */
}

「div#header-bk」で横いっぱいに背景を設定します。そして、「div#header」で表示領域を確保します。

４．ボディ部を作成する

CSS

/* ボディ */
/* ボディの大枠 */
div#body-bk{  
	width: 970px;            /* 横の幅970px */
	margin: 10px auto 0;     /* 上から10px分余白を取る */
	padding-bottom: 150px;   /* フッターの高さの分余白を取る */
}

/* ボディ */
div#body{  
	border: 5px solid #444;  /* 黒枠で囲う */
}

ボディ部では「padding-bottom」でフッターの領域の高さ+余白分を指定します。

これで、ボディ部に入力した内容がフッターに入らず表示されます。

ボディ部の高さは指定していないため、入力した内容によって縦幅が決まります。

５．フッター部を作成する

CSS

/* フッターの背景 */
div#footer-bk
{
	background-color: #444;   /* 背景色(黒) */
	width:100%;               /* 横の幅を100% */
	height: 120px;            /* 縦の幅を120px */
	position: absolute;       /* 絶対位置指定することを定義 */
	bottom: 0px;              /* 絶対位置指定(左0px,下0px) */
	padding: 10px 0;          /* 上下に余白を取る */
}
/* フッターの表示領域 */
div#footer{
	border: 5px solid #fff; /* 表示領域を白枠で囲う */
	height: 100px;          /* 縦幅の指定100px */
	width: 970px;           /* 横の幅970px */
	margin: auto;           /* 中央揃え */
}

「div#footer-bk」で「position:absolute」「bottom: 0px;」を指定して、画面の下部に表示するように指定します。

「position:absolute」で絶対位置指定となるため、どれだけスクロールが発生しても必ず画面の下部(bottom:0px)の位置にフッターが表示されます。

フッターの高さは「div#body-bk」で指定した「padding-bottom」の高さ以下にして、「div#body」の内容がフッターに掛からないようにします。