フッターの位置を（position:fixed）使わずに固定する方法。
コンテンツ量が多いときは、スクロールした一番下に表示する。
コンテンツ量が少なく、スクロールが発生しない場合は画面の下にフッタが表示される。
この方法を使えばコンテンツの量が少なくてもフッターの位置が固定できる。
フッタ高さ分だけマージンを確保
HTMLソースを見ればわかるが、ブランクの＜div class=”push”＞とフッタ領域の高さが同じになっている。画面サイズを小さくしたときに、この部分でフッタの表示位置をうまく調整している。
注意点
フッタコンテンツがCSSで指定した高さよりも大きくなる場合はレイアウトが崩れてしまう。
この点に注意すれば、問題なく表示できます。
→実装ページ
【CSS】
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*min-height*/
http://www.htmq.com/style/min-height.shtml
/*!important*/
important とマークされた宣言は、スタイルシートの中で遅れて出現した場合でも、同じ要素についての他のいかなる通常の宣言も上書きする。
