CSSでフッターを適切な位置に配置する方法

PR TIMESフロント・エンジニアの山田です。
単純ですがCSSでど忘れしがちな設定を備忘録として残しておきます。
ヘッダー・フッター・メインコンテンツでページを構成する場合、フッターの位置を適切な場所に配置するスタイルです。

まずはこの形。

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

html,  body { margin: 0; width: 100%; height: 100%;}
header { width: 100%; height: 60px; background-color: #666; position: fixed; }
main { padding-top: 60px; height: 200px; background-color: #fff000; }
footer { width: 100%; height: 60px; background-color: #999; }

これだとコンテンツが短い場合フッターが中途半端な位置に来てしまいます。

そこでフッターがウィンドウ最下部に来るようしてみました。

footer { width: 100%; height: 60px; background-color: #999; position: absolute; bottom: 0; }

一見フッターが最下部につきますが、スクロール時にコンテンツがはみ出してしまいます。

そこでページ全体をdivで囲います。

<div class="container">
  <header>ヘッダー</header>
  <main>コンテンツ</main>
  <footer>フッター</footer>
</div>

そして、そのdivに対して以下のスタイルを設定。

.container { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; }

すると、コンテンツが短い時はページ最下部に、コンテンツが長くスクロールが出てしまう場合にはコンテンツ下にフッターを持ってくることができました。

まとめると、以下のようになります。

<div class="container">
  <header>ヘッダー</header>
  <main>コンテンツ</main>
  <footer>フッター</footer>
</div>

html,  body { margin: 0; width: 100%; height: 100%; }
.container { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; }
header { width: 100%; height: 60px; background-color: #666; position: fixed; }
main { padding-top: 60px; height: 200px; background-color: #fff000; }
footer { width: 100%; height: 60px; background-color: #999; position: absolute; bottom: 0; }