Webサイトコーディングのあれこれ: CSSのFlexboxを使って簡単にフッタを最下部に固定する方法

今回はCSSのFlexboxを使ってフッタをブラウザの下部に固定配置してみましょう。

対応ブラウザはIE10以降とモダンブラウザです。

前回の上下左右中央に表示するCSSも使ってコンテンツを上下左右中央に配置もしてみます。

【1】HTMLとCSSファイルを用意します

※用意したCSSファイルへのパスはご自分の環境に合わせて変更してください。

(HTMLソース)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/flex_footer.css">
<title>CSSのFlexboxを使って簡単にフッタを最下部に固定する方法</title>
</head>

<body>

<body>

<header>ヘッダエリア</header>

<section>
<h1>コンテンツエリア</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</section>

<footer>フッタエリア</footer>

</body>

</body>
</html>

【2】CSSもしくはSASSを記述していきます。

(1) CSSの簡単なリセットと見た目を整えるスタイルを指定します。

※下記CSSはgulpでSassからCSSへ変換し
自動でベンダープレフィックスを追加したソースです。

詳しくはこちらを参照ください。

@charset "UTF-8";
/*------------------------------------
    簡単なリセットとページのスタイル
-------------------------------------*/
* {
margin: 0;
padding: 0;
}

header {
background: #560066;
color: #fff;
text-align: center;
padding: 20px 0;
font-size: 20px;
}

section {
text-align: center;
background: #cdcdcd;
padding: 20px 0;
}

section h1 {
margin-bottom: 10px;
}

footer {
background: #000;
text-align: center;
color: #fff;
padding: 20px 0;
font-size: 20px;
}

(1) 最下部にフッタを固定するスタイルを指定します。

/*------------------------------------
    最下部にフッタを固定するスタイル
-------------------------------------*/
html {
height: 100%;
}

body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
height: 100%;
}

header {
-webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

section {
-webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

footer {
-webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

これでフッタがブラウザの下部に配置されたと思います。

(1) では、コンテンツを上下中央に配置するスタイルを追加してみましょう。

下記CSSに追加します。

section {
-webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

↑に下記を追加

/* ↓ 上下中央に配置するスタイル ↓ */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
-webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
/* ↑ 上下中央に配置するスタイル ↑ */

上記スタイルを追加した時に子要素が横に並ぶ場合は下記CSSを追加してください。

-webkit-box-orient: vertical; /* ← 子要素を縦に配置するスタイル */
-webkit-box-direction: normal; /* ← 子要素を縦に配置するスタイル */
      -ms-flex-direction: column; /* ← 子要素を縦に配置するスタイル */
          flex-direction: column; /* ← 子要素を縦に配置するスタイル */

これで、フッタをブラウザ下部に配置し、コンテンツを上下中央に表示できたかと思います。

(Sassで記述した場合)

/*------------------------------------
    簡単なリセットとページのスタイル
-------------------------------------*/

* {
    margin:0;
    padding:0;
}

header {
    background:#560066;
    color:#fff;
    text-align:center;
    padding:20px 0;
    font-size:20px;
}

section {
    text-align:center;
    background:#cdcdcd;
    padding:20px 0;
    h1 {
        margin-bottom:10px;
    }
}

footer {
    background:#000;
    text-align:center;
    color:#fff;
    padding:20px 0;
    font-size:20px;
}

/*------------------------------------
    最下部にフッタを固定するスタイル
-------------------------------------*/

html {
    height:100%;
}

body {
    display:flex;
    flex-direction:column;
    height:100%;
}

header {
    flex:0 0 auto;
}

section {
    flex:1 0 auto;

    /* ↓ 上下中央に配置するスタイル ↓ */
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column; /* ← 子要素を縦に配置するスタイル */
    /* ↑ 上下中央に配置するスタイル ↑ */

}

footer {
    flex:0 0 auto;
}

どうでしたでしょうか？
ブラウザとフッタの間に隙間もできないので、
細かい調整なしで簡単にフッタをブラウザ下部に配置することができますね。

下記サイトを参考にさせていただきました。

Quick Tip: The Best Way To Make Sticky Footers