![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Question-1024x1024.png)
例えばお問い合わせフォームのサンクスページや404ページなど、メインコンテンツはテキストが数行で終わる場合があります。
特に対策をしないと以下のようになり、フッターの下に余白が出来てしまいます。
![フッターの下に余白がある状態](https://junpei-sugiyama.com/wp-content/uploads/2023/03/short-page-footer-bottom01.jpg)
フッターの下に余白がある状態
これはカッコ悪いので、以下のようにフッターはコンテンツ量に関わらず最下部に表示するようにする方法を解説します。
![コンテンツ量が少なくてもフッターはページ最下部](https://junpei-sugiyama.com/wp-content/uploads/2023/03/short-page-footer-bottom02.jpg)
コンテンツ量が少なくてもフッターはページ最下部
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
CSSでコンテンツ量が少なく短いページでもフッターを最下部に表示する方法
早速ですがコードはこちらになります。
<body>
<div class="wrap">
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</div>
</body>
HTMLはbodyタグの子要素を.wrap
というclassを付けたdivタグで囲っています。
そしてCSSはこちらです。
.wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
これで大丈夫ですが、スマホで見るとフッターはアドレスバーに隠れることがあります。
例えばこちら。
![フッターはアドレスバーの下にある](https://junpei-sugiyama.com/wp-content/uploads/2023/03/short-page-footer-bottom03.jpg)
フッターはアドレスバーの下にある
下にスクロールするとフッターが現れます。
![フッターはスクロールすると見える](https://junpei-sugiyama.com/wp-content/uploads/2023/03/short-page-footer-bottom04.jpg)
フッターはスクロールすると見える
冒頭のようにフッターの下に余白があるわけではありませんが、フッターをページを開いた時点で表示させるにはCSSのmin-height: 100vh;
の代わりにjQueryに以下のコードを書きます。
$(window).on("load resize", function () {
let window_height = window.innerHeight
? window.innerHeight
: $(window).innerHeight();
$(".wrap").css("min-height", window_height + "px");
});
するとスマホで開いた時点でフッターは表示されます。
![フッターはスマホを開いた時点で表示](https://junpei-sugiyama.com/wp-content/uploads/2023/03/short-page-footer-bottom05.jpg)
フッターはスマホを開いた時点で表示
まとめ
今回はコンテンツ量が少なく短いページでもフッターを最下部に表示する方法を解説してきました。
LPなど長いページやサンクスページ、404ページなどが無いと気が付かないかもしれませんが、フッターの下に余白があるのは見栄えが良くないのでしっかり確認しておきましょう。
以上になります。
![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Joy-1024x1024.png)