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

カテゴリ:CSSテクニック 2009年4月13日 13:58

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

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

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

▼EntryMore▼

HTML ソース

CSS ソース

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

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

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

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

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

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

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

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/135