システム開発ブログ

Webコンサルティング部

Webサイト構築・Web戦略

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

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

image_01.gif

解決策としては、

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

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

CSSに下部のソースを書きます。
html {
	background: #F60; /* フッターの背景色を入れる */
}

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

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

image_02.gif

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ