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

Comments and faves By: Andrew Galloway
フッターの固定はどこのサイトでも行っているようなレイアウトです。
これが簡単なようで意外と難しく、私もサイトを作成したときにかなり嵌まりました。
今回は、このフッター固定の方法をステップ バイ ステップでご紹介します。
※CSSでヘッダーとフッターを常に固定する方法はこちら
1.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>
2.全体のレイアウトの設定をする
/* 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」はフッターの絶対位置指定に使用すため、ここで定義しておきます。
3.ヘッダー部を作成する

/* ヘッダーの背景 */ 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」で表示領域を確保します。
4.ボディ部を作成する

/* ボディ */ /* ボディの大枠 */ div#body-bk{ width: 970px; /* 横の幅970px */ margin: 10px auto 0; /* 上から10px分余白を取る */ padding-bottom: 150px; /* フッターの高さの分余白を取る */ } /* ボディ */ div#body{ border: 5px solid #444; /* 黒枠で囲う */ }
ボディ部では「padding-bottom」でフッターの領域の高さ+余白分を指定します。
これで、ボディ部に入力した内容がフッターに入らず表示されます。
ボディ部の高さは指定していないため、入力した内容によって縦幅が決まります。
5.フッター部を作成する

/* フッターの背景 */ 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」の内容がフッターに掛からないようにします。
Related Posts

« 簡単にページナビゲーションが作れるWordPressプラグイン「WP-PageNavi」 画像をきれいに拡大してくれるフリーソフト「SmillaEnlarger」 »
Trackback URL
http://webnonotes.com/css/footer/trackback/Comments
最後の margin: auto; /* 中央揃え :/のコメント閉じの部分が*ではなく:になっています。
他、参考になりました。
修正させていただきました。
ご指摘有難うございます。