flex-boxを使ってフッターを一番下に配置する方法

コンテンツ量が少ないページでも、flex-boxを使ってフッターが画面の一番下に配置されるようにする方法を説明します。

flex-boxを使うのが一番簡単

フッターを一番下に配置する方法はいくつかありますが、flex-boxを使うのが一番簡単でかつCSSやHTMLの記述がスマートです。

この方法の概要は「ページの文量が少ない場合には、メインコンテンツの部分をflex-boxで縦に引き伸ばすことでフッターを画面の一番下に配置する」というものです。

下記にシンプルなHTMLの実装例を示します。

<html>
  <body>
    <header>ヘッダー</header>
    <div>コンテンツ</div>
    <footer>フッター</fotter>
  </body>
</html>

よくある、ヘッダー・コンテンツ・フッターの三層構造のサイトです。

cssは下記のように指定します。

html{
  height: 100%;
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
div{
  flex: 1;
}

cssの趣旨は以下の通りです。

縦に伸ばす要素（ここではコンテンツ部の<div>）にflex: 1;を指定
その親要素（ここでは<body>）にdisplay: flex;とflex-direction: column;を指定し、さらにmin-height: 100%;と指定して100%以上の高さになるようにする
さらにその親要素（ここでは<html>）にheight: 100%;を指定

これでページの分量が少ない場合でも、コンテンツ部の<div>が縦に引き延ばされてフッターが一番下に配置されます。