フッターを常に画面下に表示する

NO IMAGE

htmlとbodyにhieght:100%を指定
html,body{
height:100%;
}

frameにブラウザの高さ100%を指定

このままではフッターの高さ分のスクロールが生じてしまうので、frameにfooterの高さ分のマイナスpaddingを指定することで、フッターの表示領域をframeの表示領域内に押し上げる。

※FireFoxでは上手くひょうじされるのに、IEでは、フッターがコンテンツにかぶさってしまっていました。

frameのフッターの高さ分マイナスにするところ、marginに設定していたのがまずかったよう。

marginではなく、paddingにしていすることで解決。

#frame {
width:100%;
min-height:100%;
margin: 0px auto 0px;
padding:0px 0px -80px;
text-align:left;
height:auto !important;
height:100%;
}

#footer {
margin:0 auto 0;
padding:0px;
width:100%;
height:80px;
}

#frame #footerspace {
height:80px;
}

frameの子要素にfooterspaceを設定。

footerspaceにフッターの高さ分のheightを指定することで、フッターがコンテンツに下部って表示されないように調整。

CSS+htmlカテゴリの最新記事