CSS-フッターの固定



CSS フッター固定

CSSレイアウトを利用してフッターを設置する場合、コンテンツ量が多くスクロールバーが表示されるようなページでは、必然的にフッターは画面最下部に表示されます。

しかし、コンテンツ量が少ないページの場合には、フッターが画面の下から離れて画面中央などに表示されてしまい、不格好なペーシになってしまいます。

コンテンツ量が少なくてもブラウザの最下部にフッターの表示を固定する方法をここに記述します。


フッター固定方法


1. htmlとbodyの高さを100%する。

html, body {  
  height: 100%;
}

2.全体を囲うブロック要素(#container)の設定

#container {
  min-height: 100%;
  position: relative;
  height: auto !important;
  height: 100%;
  width: 100%;
}

3.フッター領域分のに高さを確保する

#contents {
  padding-bottom: 50px;
}

4.フッタを絶対位置指定

#footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 50px;
}


関連

CSS

CSS-floatレイアウト

CSS-positionレイアウト





スポンサード リンク