コンテンツ量が少ないページでもフッターをブラウザの最下部に表示する方法を説明します。いくつかやり方がありますが、汎用性の高いFlexboxを使った方法を紹介します。このブログもこの方法を使っています。

フッターをブラウザ最下部に表示するコード

下記のHTMLを例に使います。(head等は省略)

HTML

<html>
  <body>
    <header class="header">
      ヘッダー
    </header>
    <div class="contents">
      コンテンツ
    </div>
    <footer class="header">
      フッター
    </footer>
  </body>
</html>

css

cssのポイントは、

  1. htmlにhight:100%を指定
  2. bodyにmin-height: 100%とdisplay: flexとflex-direction: column
  3. .contentsにflex: 1を指定

の3点です。


html {
  width: 100%;
  height: 100%;
}
  body {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 100px;
  background: skyblue;
}
.contents {
  width: 100%;
  flex: 1;
  background: lightgreen;
}
.footer {
  width: 100%;
  height: 100px;
  background: green;
}

ブラウザ表示

コンテンツのdivが伸びてフッターがブラウザの一番下に表示されます。

flexboxでフッターを最下部に表示