« PreviousNext »

Entry

ページの中身が少ない時、フッタが上に上がってきてしまうのに対処する方法(min-heightを使用する方法)

ページのコンテンツがブラウザ表示領域の縦幅より少ないと、フッタがページの最下部に配置されずに上に上がって来てしまいます(意図せずフッタ下に余白ができてしまいます)。 テーブルレイアウトの場合は起こらない現象なのですが、CSSレイアウトではこのような現象が起こってしまいます。

その対処方法としていくつかありますが、きちんとページ下部にフッタを合わせるためには場合によってはJavaScriptを使わなければならないなど、それなりのめんどくささがあります。

そこで今回は、「そこまでやる必要はないけど、あまりにも余白が出来すぎていて不恰好だ、何とかしたい」という場合に役立つテクニックをご紹介。

概要

簡単に言うとCSSのmin-heightプロパティを使い、コンテンツの縦幅をある程度確保しておき、フッタをページ下部の方に配置するという方法です。下記のように予め、コンテンツ領域の縦幅を取っておくことで(ここでは500px)、たとえどんなに内容が少なくとも常にその分(500px)の縦幅を確保しておくということです。ブラウザの解像度や表示領域の縦幅はそれぞれの環境に依存するため、決して意図したとおりになるわけではないのですが、あくまでも簡易的な対処方法として使うには手軽かと思います。

詳細

これでcontentsブロックの縦幅が最低500pxは確保されるようになります。
min-heightはIE6以下では効かないため、Windows IE6以下とMac IEに対してはheightで対処します。この場合、コンテンツが500pxを超えた場合は縦幅を拡張してくれるので問題なしです。

※heightプロパティだけではモダンブラウザ(Firefoxなど)では500pxを超えた場合でもフッタの位置は固定されたままになってしまいます。

Page Top

« PreviousNext »