フッターの背景をコンテンツが少ない時でも下まで表示させる

デジパのベトナムオフィシャルサイトがオープンしました。

さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。

---- こっから続き

Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。

キャプチャみたいな感じです。

コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。

と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。

htmlとbody要素にheight: 100%指定して...みたいなのが覚えられないだけですが。

また、この方法だとフッターの高さを固定する方法が一般的だと思う。

有名どころだと、、、

• A CSS Sticky Footer
• Lucky bag::blog: フッタを常に下部に配置
• フッターを画面の下に表示～CSSテクニック～

辺りでしょうか？
A CSS Sticky Footerみたいに画像オンリーならいいんですが、テキストが有るとDDTT対応（文字サイズの可変でもちゃんとテキストが読める状態）をうたえなくなってしまうのでダメだったりします。

で、まぁ前置きが長くなりましたが、フッターの背景を下まで表示させれればいいな。と思った次第です。

キャプチャみたいな感じです。

サンプルも用意ししてますので、以下よりご覧下さいませませ。

• このサンプルを見る

サンプルのようにあまりにも本文が無いと、フッターの色が強すぎる場合など目に優しくなかったりするので、その辺りはメインエリアにmin-heightプロパティとかである程度確保しておけばいいかと思います。

#main {
	float: left;
	width: 540px;
	margin-right: 20px;
	min-height: 200px;
}
* html #main { /* for IE6 */
	height: 200px;
}

で、肝心のフッター部分ですが、上記の方法とかtable-cellとか色々試行錯誤した結果、とてもカンタンに出来てなんで気づかなかったのか不思議になったんですが、以下のような指定をすることで出来ました。

html {
	background: #d3b0ac;
}
body {
	background: #fff;
}

これだけです。
今回フッターには軽くグラデーションを入れているので、グラデーションの終了部分の色をhtml要素に指定してあげます。

他はコレといったことはしてないです。
脳内妄想の段階で無理だと思ってて、html要素にbackgroundの指定をする。っていう発想が無かったので、ここにたどり着くのに正直結構時間が掛かりました。

ただ、この方法の欠点は、横幅100％な背景がある場合に限られます。
（html要素に背景画像を用意してrepeat-yで表示させればいけるんですが、IEで横幅を変えたりした時に1pxずれる問題が解決できなかったので...）

限られるとはいえ、フッターがちゃんとボックスみたいになってる場合はそこまで不自然じゃないと思うので、いいかなーとか。

ということで今回のサンプルやデジパベトナムみたいなデザインの場合は使えるかと思います。
心なしかウチのデザインでフッターの横幅100％は増えているので活躍しそうです。

ちなみに今回のサンプルでは、フッターにはdivを一つ噛ませて横幅100％にしてますが、あっきーのブログで紹介されている方法を使えばdivを増やさずに出来ちゃったりします。

横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•