ももの知恵の樹

CSS-フッターの固定

CSS フッター固定

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

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

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


フッター固定方法


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


html, body {  
  height: 100%;
}
  • htmlとbody要素に「height: 100%」を指定します。

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


#container {
  min-height: 100%;
  position: relative;
  height: auto !important;
  height: 100%;
  width: 100%;
}
  • ブロック要素を相対位置指定にします。
  • min-heightプロパティは要素の最少高さを指定することができます。
    • 多くのブラウザでは「min-height: 100%」と指定することで、「コンテンツ量が少ない場合は高さ100%とし、高さ100%を超える場合（スクロールバーが表示される場合）はコンテンツ量に応じて自動的に高さを広げる」ということを設定します。
  • 高さを自動的に調整するために「height: auto !important」とします。
    • 「!important宣言は、スタイルの宣言の後ろに「!important」を記述することで、そのスタイルを優先して適用させるものです。
  • 「!important宣言」が認識されないブラウザがあるため、「height: 100%;」と記述します。

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


#contents {
  padding-bottom: 50px;
}

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


#footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 50px;
}
  • footerを最下部に表示するための設定として、絶対位置配置を適用させる「position: absolute」を指定します。
  • 最下部に表示とは、画面の一番下から0pxの位置の配置であることから「bottom: 0」を指定します。


関連ページ