こんにちは、Webデザイナーのけんです。
Webページのコンテンツ量が少ないと、フッターが上まで上がってきてしまい、空白ができてしまうことがあります。開設したばかりのWebサイトによくあることですが、見栄えがよくありませんね。
そこで、コンテンツ量が少なくても、フッターをブラウザのウインドウ最下部に固定する方法を紹介します。
固定という言い方は語弊があるかもしれません。フッターが常に追従してくる固定だと思ってしまうかもしれないからです。
ここで紹介するフッター固定は、コンテンツ量が多ければ、それに応じて常にページの下部に表示されます。
いわゆるSticky Footer(スティッキーフッター)と呼ばれるテクニックですね。「はりつくフッター」みたいな意味です。スティッキー・フィンガーズではありません。
position: absolute;でフッターをウインドウ最下部に固定
フッターにpostion: absolute;を指定してページ最下部に固定します。コードは以下の通り。
HTML
head要素内は今回は関係ありませんので、省略しています。また、header要素も関係ありませんが、レイアウトがイメージしやすいように、一応記述しておきました。
<!DOCTYPE html>
<html lang="ja">
<head>
<!--省略-->
</head>
<body>
<div id="wrap">
<header>ヘッダー</header>
<div id="contents">
<p>ここはコンテンツです。</p>
</div>
<footer>フッター</footer>
</div>
</body>
</html>ポイントとしては、コンテンツ(id=”contents”)とフッター(footer)をくくる親要素が必要ということです。このコードでいうとwrapというidを指定しているdivタグのことですね。
CSS
html {
height:100%;
}
body {
height: 100%;
}
/*全体の親要素*/
#wrap {
position: relative;
height: auto !important; /*IE6対策*/
height: 100%; /*IE6対策*/
min-height: 100%;
}
/*メインコンテンツ*/
#contents {
padding-bottom: 50px; /*フッターの高さと同じ*/
}
/*フッター*/
footer {
height: 50px; /*フッターの高さ*/
position:absolute;
bottom:0;
}実装手順＆コード解説
なぜ上記のコードでウインドウ最下部にフッターが固定できるか、要素ごとに分けてくわしく解説します。深く知りたい方だけ読んでください。
html, body
html要素とbody要素は、デフォルトでは内包しているコンテンツ量で高さが決まります。
なのでbodyが内包する子要素にheight: 100%;を指定しても、親要素であるhtml要素とbody要素の高さが広がらないわけですから、ブラウザ画面いっぱいまで高さは広がりません。
height: 100%を指定することで、html要素とbody要素の高さはブラウザ画面いっぱいになります。
親要素(id=”wrap”)
後にfooterで絶対配置を指定するので、そのための基準としてposition: relative;を指定します。
min-heightプロパティは最低限の高さを指定するプロパティです。min-height: 100%;とすれば、「最低でも100%の高さを確保するよ」ということです。
100%というのは親要素によって決まります。wrapの親要素は、さきほど高さをブラウザいっぱいにしたbodyなので、最低でもブラウザいっぱいの高さを確保するというわけです。
コンテンツ量が増えて100%の高さ(ブラウザの領域)を超えたとしても、自動的に高さを伸ばしてくれます。
このmin-heightプロパティですが、IE6では対応していません。IE6も対応するWebサイトの場合は、IE6対策のheight: 100%;とheight: auto!important;も記述しておきましょう。
対応する必要がないなら記述しなくてOK。
メインコンテンツ(id=”contents”)
footerで指定する高さの分だけ、padding-bottomを指定します。これを指定しないとフッターとコンテンツが重なってしまいます。
footer
position: absolute;を指定し、bottom: 0;を指定することで最下部に固定します。
フッターの高さは各サイトの状況や好みに応じて指定してください。
フッターの見た目を整える
上記のコードは、フッターを下部に表示させるためのコードで無駄なものは一切省きました。
このままではお粗末な見た目になっていると思うので、スタイルを加える必要があります。
footer {
width: 100%; /*幅いっぱいに表示させる*/
background-color: #222222; /*フッターの色*/
color: #ffffff; /*フッターの文字色*/
}position: absolute;を指定したボックス(この場合はfooter要素)は、内包するコンテンツが収まる最小値の大きさで表示されます。
なのでブラウザ幅いっぱいにフッターを表示するためにwidth: 100%;を指定します。
よりフッターらしい見た目にするために、背景や文字色を指定しましょう。
これで最低限フッターっぽい見た目になりました。
まとめ
以上、フッターをウインドウ最下部に固定する方法でした。
フッターが上まで浮いてしまうのは、Webサイト全体のコンテンツ量が少ないと起こってしまう、わりとメジャーな悩みだと思います。
多くのサイトはフッターにたくさんのコンテンツを詰め込んで、かさ増しして解決していると思います。ページ数が多いと、フッターにページリンクを並べてサイトマップのようにしているサイトを多く見かけますね。
しかし、作りたてのWebサイトはフッターに詰め込むコンテンツがありません…
そんなときはぜひ、このCSSテクニックを実装してみてください！
コンテンツ量が多くなってきたら、はずしてしまってもいいですし、そのままにしておいても問題ないと思います。
