コンテンツが少ない場合でもフッターを常に一番下へ表示させるCSS

ウェブサイトのフッター部分はコンテンツが少ないときには、何も手を加えていないと以下のようになります。

画像がディスプレイだとして、フッターより下の部分が上に昇ってきてしまい、それ以降には画面下まで広大なスペースができてしまいます。

これでは少々貧相です。CSSを使って、コンテンツが少ない場合でもフッターを常に画面の一番下へ表示させるようにする方法をメモします。

フッターを常に一番下へ表示させるCSS

今回紹介するCSSを利用すると、上の画像のようにコンテンツが足りなくてもフッターが常に画面一番下へ表示され、貧相に見えることはありません。

コンテンツがスクロールの必要な長さになれば、自動的に通常の通りスクロール時のフッターになります。

CSS

html {
	height: 100%;
}
body {
	height: 100%;
}
#wrapper {
	width: 100%;
	margin: 0px auto;
	padding: 0;
	position: relative;
	height: 100%;
	min-height: 100%;
}
body > #wrapper {
	height: auto;
}
#header {
	margin: 0 0 50px;
	width: 100%;
	height: 80px;
	background: #86c1af;
}
#main {
	width: 100%;
	padding-bottom: 130px; /*#footerのhightよりも大きく。*/
}
#footer {
	position: absolute;
	bottom: 0px;
	height: 80px; /*可変*/
	width: 100%;
	background: #86c1af;
}

html {

height: 100%;

}

body {

height: 100%;

}

#wrapper {

width: 100%;

margin: 0px auto;

padding: 0;

position: relative;

height: 100%;

min-height: 100%;

}

body > #wrapper {

height: auto;

}

#header {

margin: 0 0 50px;

width: 100%;

height: 80px;

background: #86c1af;

}

#main {

width: 100%;

padding-bottom: 130px; /*#footerのhightよりも大きく。*/

}

#footer {

position: absolute;

bottom: 0px;

height: 80px; /*可変*/

width: 100%;

background: #86c1af;

}

各「width」に関しては制作するウェブページによって可変してください。

「html,body,#wrapper」の height は「100％」のままいじらないでください。この height と footer の position でフッターを常に画面の一番下へ配置するようにしています。

#main はコンテンツが入るボックスです。サイドバーもここへ格納します。

注意点として「padding-bottom」は #footer の height と同等かそれ以上に設定します。今回のCSSでは footer の height が 80px で #main の padding-bottom が 130px です。

#main の 130px 中 80px 分は footer の height 80px で総裁されるので、実質 #main の height は 50px となります。

フッターとメインコンテンツの間に余白を設定する場合には、このことに注意して設定すると良いです。

サンプルデモ

実際に別の HTML ページにてサンプルデモを用意しました。

＞サンプルデモ

サンプルデモの CSS

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  margin: 0px auto;
  padding: 0;
  position: relative;
  height: 100%;
  min-height: 100%;
}
body > #wrapper {
  height: auto;
}
header {
  margin: 0 0 50px;
  width: 100%;
  height: 80px;
  background: #86c1af;
}
#main {
  width: 100%;
  padding-bottom: 130px; /*#footerのhightよりも大きく。*/
}
.box {
  margin: 0 auto;
  padding: 50px 15px;
  width: 80%;
  border: #ccc 3px solid;
}
footer {
  position: absolute;
  bottom: 0px;
  height: 80px; /*可変*/
  width: 100%;
  background: #86c1af;
  text-align: center;
}
h1 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 24px;
  line-height: 80px;
  color: #fff;
}
p {
  margin: 0;
  padding: 0;
  text-align: center;
}
span {
  line-height: 80px;
  color: #fff;
}

html {

height: 100%;

}

body {

height: 100%;

margin: 0;

padding: 0;

}

#wrapper {

width: 100%;

margin: 0px auto;

padding: 0;

position: relative;

height: 100%;

min-height: 100%;

}

body > #wrapper {

height: auto;

}

header {

margin: 0 0 50px;

width: 100%;

height: 80px;

background: #86c1af;

}

#main {

width: 100%;

padding-bottom: 130px; /*#footerのhightよりも大きく。*/

}

.box {

margin: 0 auto;

padding: 50px 15px;

width: 80%;

border: #ccc 3px solid;

}

footer {

position: absolute;

bottom: 0px;

height: 80px; /*可変*/

width: 100%;

background: #86c1af;

text-align: center;

}

h1 {

margin: 0;

padding: 0;

text-align: center;

font-size: 24px;

line-height: 80px;

color: #fff;

}

p {

margin: 0;

padding: 0;

text-align: center;

}

span {

line-height: 80px;

color: #fff;

}

サンプルデモ HTML

<body>
  <div id="wrapper">

    <header>
      <h1>フッターを常に一番下へ表示するCSS</h1>
    </header>

    <div id="main">
      <div class="box">
        <p>コンテンツの長さが足りなくてもフッターが常に画面の下に表示されます。</p>
        <p>仮にコンテンツが画面よりも長くなれば、通常通りのスクロールタイプのフッターになります。</p>
      </div>
    </div>

    <footer>
      <span>一番下にあるでしょ？</span>
    </footer>

    <!-- / #wrapper --></div>
</body>

<body>

<h1>フッターを常に一番下へ表示するCSS</h1>

</header>

<p>コンテンツの長さが足りなくてもフッターが常に画面の下に表示されます。</p>

<p>仮にコンテンツが画面よりも長くなれば、通常通りのスクロールタイプのフッターになります。</p>

</div>

<span>一番下にあるでしょ？</span>

</footer>

</div>

</body>

コンテンツが少ない時に、フッターが上へせり上がって、フッターと画面下との間に余白があると折角のウェブサイトが貧相に見えることもあり、ちょっと良く見せるために役に立つ小技です。