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

メインコンテンツの内容が少ない場合、フッター部分はメインコンテンツの真下に来てしまい、下はbodyに指定した背景色になってしまいます。 解決策としては、 ・フッターを画面下部に固定する ・メインコンテンツの高さをある程度取っておく などが挙げられると思いますが、ここでは、フッター部分がメインコンテンツの真下にある状態で、フッターの背景色を画面下部まで表示させる方法を紹介します。 CSSに下部のソースを書きます。 html { background: #F60; /* フッターの背景色を入れる */ } body { background: #fff; /* bodyの背景色を入れる */ } これにより、全てのhtmlを表示した後に、htmlの背景色が表示され、フッターの背景色が画面下部まで表示しているように見せることができます。