CSSでフッタ位置をレイアウトする （CSS Sticky Footer）

CSSテクニックで非常にシンプルだが、是非実践したいのがフッタ位置の調整。フッタの表示位置をCSSのみで調整して、画面の下に表示してくれるようにするテクニック。

画面下に固定表示（position:fixed）ではなく、コンテンツ量が多いときは、スクロールした一番下に表示する。逆にコンテンツ量が少なく、スクロールが発生しない場合でも、きちんと画面の下にフッタが表示される。わかってしまえば、簡単に実装できるCSSテクニックだが、覚えておくと役に立つ。

フッタ高さ分だけマージンを確保
HTMLソースを参照していただくとわかるが、ブランクの<div　class="push">とフッタ領域の高さが同じになっている。画面サイズを小さくしたときに、この部分でフッタの表示位置をうまく調整している。

注意しておく点は、フッタコンテンツがCSSで指定した高さよりも大きくなる場合はレイアウトが崩れてしまう。この点に注意すれば、問題なく利用できるので実践していただきたい。