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

/ Webｺﾝｻﾙﾃｨﾝｸﾞ部　

川本 (2010年5月31日 20:52)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略

メインコンテンツの内容が少ない場合、フッター部分はメインコンテンツの真下に来てしまい、下はbodyに指定した背景色になってしまいます。

解決策としては、

・フッターを画面下部に固定する
・メインコンテンツの高さをある程度取っておく

などが挙げられると思いますが、ここでは、フッター部分がメインコンテンツの真下にある状態で、フッターの背景色を画面下部まで表示させる方法を紹介します。

CSSに下部のソースを書きます。

html {
	background: #F60; /* フッターの背景色を入れる */
}

body {
	background: #fff; /* bodyの背景色を入れる */
}

これにより、全てのhtmlを表示した後に、htmlの背景色が表示され、フッターの背景色が画面下部まで表示しているように見せることができます。

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

システム開発のアイロベックス（東京都新宿区）