---
title: "フッターを一番下に表示させる方法"
description: "「コンテンツ内容が少ない時でも フッターエリアは画面の一番下に表示したい。」 そ…"
url: "https://www.sensitivity.jp/css/%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%82%92%e4%b8%80%e7%95%aa%e4%b8%8b%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/"
canonical: "https://www.sensitivity.jp/css/%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%82%92%e4%b8%80%e7%95%aa%e4%b8%8b%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/"
date: "2020-12-01"
modified: "2020-12-02"
categories: ["CSS"]
---
# フッターを一番下に表示させる方法
## 「コンテンツ内容が少ない時でも
フッターエリアは画面の一番下に表示したい。」
そんな事はこれまでも幾度となくありました。
しかし、その都度の状況などで対処方法が違ったので、ふいうちにその時がやってくると、
「あれ〜どうしてたっけ？」
と、自身がなる為、**覚書メモ**として書いておこうと思います。
ひと昔前は横並びのリストや横並びのBoxを配置する際に多様していたのは『float』でした。
『flexbox』が登場してからはとても便利でずーっとflexboxばかり使用してます。
その『flexbox』でフッターエリアを一番下へ配置することも簡単に出来ちゃうんですね。
本当に便利になったなぁと感激します。
## flexboxでフッターアリアを画面の一番下に配置する
```
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
```
まずはcssでbodyタグにflexboxのスタイルを設定。
```
main {
flex:1;
}
```
そして、メインコンテンツを内包しているタグ（ex:mainなど）に上記スタイルを設定。
※htmlの記述は以下の内容が想定です。
```
フッターエリアを一番下に表示させる
メインコンテンツ
```
これだけの簡単な設定でコンテンツが少なくてもフッターは画面の下に表示されるようになります。
今まで色々複雑な設定をやっていたことが・・・・『flexbox』素晴らしい✨