コンテンツの少ないページでも、footerを画面下部に表示させる方法

footerが上に詰まってしまう

ホームページを作っていると送信完了画面やサイトマップなど、コンテンツ量の少ないページを用意したときに、footerが画面下部より上に詰まって表示されるという経験をされた人はたくさんいると思います。

mainタグなどコンテンツにmin-height: 100vh;と設定しても、今度はfooterが画面下部より下にはみ出てしまうので、footerを見ようとすると一々スクロールしないといけないですよね。

flexを使った簡単な対処法

headerタグなどの上にclass名は何でもいいので、１つブロック要素を追加して囲みます。

その要素にflexを設定し、mainタグにflex: 1;を設定することで、footerを画面下部に配置することができます。

以下でも確認できますが、CODEPENのサイトで見られたほうが分かりやすいと思います。

ミソは.siteWrapに記述したmin-height: 100vh;です。

これを記述することで.siteWrapの最低の高さが、ブラウザの描写エリアの高さになりました。

flexは一括指定プロパティで、background-imageやbackground-colorなどをまとめて指できるbackgroundと同じものです。

そのため、flex: 1;はflex-grow: 1;と同じ意味として解釈されます。

終わりに

いかがでしたか？

思った以上に簡単にできましたよね。

これを覚えておくだけで、footerが画面下部より上に詰まってダサく見えてしまうのを防げます！