コンテンツが足らない場合でもフッターを表示領域最下部に配置する

2009-04-13 13:58:19

ちょっと昔の記事ですが、「lucky Bagさんで紹介されていたテクニックをご紹介。

コンテンツが足らない場合でもフッターを表示領域最下部に配置するデモ

サンプルを見てもらうと分かりますが、コンテンツがブラウザの表示領域より少なくてもフッターが下部にくっつくように配置されていると思います。
動的にコンテンツを生成するようなサイトだったり、テンプレートがあって掲載するコンテンツ内容が少ないページが存在してしまうようなケースで使えるテクニックです。

HTML ソース

CSS ソース

どうやって実現しているかのポイントを説明します。
まず、html , body双方にheight: 100%を指定します。

こうすることによって、ブラウザ領域いっぱいにhtmlbodyの高さが確保されます。
こうしないと、htmlbody要素は内包しているコンテンツの部分までしか高さが確保されません。

次に、全体を囲んでいる containerへ、min-height: 100%を指定します。こうすることで、”最低でも”高さが 100%(つまりブラウザ領域いっぱい)になります。

したがって、コンテンツ内容が 100% を超えた場合(ブラウザ領域の高さを超えた場合)でも自動で高さが伸びていく、というわけです。

さらに、containerに対してposition: relativeを指定し、内包するfooterに対してposition: absoluteを指定、さらにbottom: 0を指定することでcontainer下部に固定配置されることになります。

加えて、footer上部に位置するwrapに対して padding-bottom: 50px(ここでの数値は、フッターに設定している高さと同じ値を設定) を指定することで、フッターがコンテンツ部分にかぶさることを防いでいます。

しかし、これの問題点として、min-heightに対応していない IE 向けに、ハックを使って IE にもmin-height (と同じような動作)を実現しています。この min-height 対策は以前に書いたのでそちらを参考にしてください。「2行追加するだけで、簡単にIE6でもmin-heightを実現する方法

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]