コンテンツが少ない場合でもフッターを常に一番下へ表示させる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>