【HTML・CSS】フッターを常に画面の最下部（一番下）に表示する方法

この記事では、フッターを画面の最下部（一番下）に固定して表示する方法を紹介します。
「フッターが画面の最下部に表示できず、困っている」という方は、本記事で紹介している方法を試してみてください。

次の表示内容をご覧ください。このHTMLではコンテンツの量が少ないため、コンテンツとフッターとの間隔が詰まってしまっています。
この表示だと画面ごとのコンテンツの最低の高さが統一できず、レイアウトが崩れて見える恐れがあります。

See the Pen フッターを最下部に固定して表示 – Part1 by aiiro (@aiiro29) on CodePen.

一方、次の表示ではコンテンツとフッターの間にスペースが確保され、フッターがウィンドウの最下部に固定されています。

See the Pen フッターを最下部に固定して表示 – Part2 by aiiro (@aiiro29) on CodePen.

以降では、フッターを画面の一番下に表示するためにどんなCSSを設定する必要があるかを説明します。

flexboxを使ってフッターを画面最下部に固定する
まとめ

flexboxを使ってフッターを画面最下部に固定する

フッターをウィンドウの最下部に常に表示したい場合、flexboxで実現できます。

「コンテンツ部分のタグとフッターを囲んでいるタグ」と、「コンテンツ部分のタグ」にCSSを追加していきます。

今回の例では、「コンテンツ部分のタグとフッターを囲んでいるタグ」が”body”タグに、「コンテンツ部分のタグ」が”main”タグに相当します。

bodyタグには、次のスタイルを追加してください。

display: flex;
flex-flow: column;
min-height: 100vh;

“display:flex”でflexboxを設定しています。

それだけだと横並びになってしまうため、“flex-flow:column”で縦方向に並ぶようにします。

“min-height: 100vh”によって、body全体の表示領域を確保しています。

bodyタグに設定するCSSは以上です。

次は”mainタグ”にスタイルを適用します。

flex: 1;

“flex:1″を適用することで、bodyタグ中に存在する他の2つのタグ、”headerタグ”と”footerタグ”の高さを除いた、残りの部分が”mainタグ”で埋まります。

設定した結果は、次のようになります。

See the Pen フッターを最下部に固定して表示 – Part2 by aiiro (@aiiro29) on CodePen.

できあがったHTMLとCSSは次のとおりです。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>フッターを画面最下部に表示</title>
</head>
<body>
    <header>
        ヘッダー
    </header>

    <main>
        コンテンツ
    </main>

    <footer>
        フッター
    </footer>
</body>
</html>

body {
    margin: 0;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

header {
    background: #333333;
    color: #ffffff;
    height: 40px;
}

main {
    background: #ffffff;
    flex: 1;
}

footer {
    background: #333333;
    color: #ffffff;
    height: 40px;
}