たった4行のCSSでフッターを画面の最下部(一番下)に表示する方法【flexbox】

HTML&CSS

この記事では、フッターを画面の最下部(一番下)に固定して表示する方法を紹介します。

「フッターが画面の最下部に表示できず、困っている」という方は、以降で紹介している方法を試してみてください。

まずは、次のCodePenのHTMLをご覧ください。

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

上のHTMLでは、”header”、”main”、”footer”の3つのタグに分けていますが、フッターを画面の最下部に固定できていません。

今回はたった4行のCSSで、フッターを画面の一番下に表示する方法を紹介したいと思います。

スポンサーリンク

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>
  • CSS
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;
}

まとめ

flexboxを使うと、わずか4行のCSSを設定するだけでフッターを最下部に表示できるようになります。

Webサイトの制作では、フッターを用意する機会が頻繁にありますので、今回ご紹介した解決方法を試してみてください。