コンテンツの高さが足りなくてフッターの下に余白が出来ちゃうんだけどどうすればいいの？
例えばお問い合わせフォームのサンクスページや404ページなど、メインコンテンツはテキストが数行で終わる場合があります。
特に対策をしないと以下のようになり、フッターの下に余白が出来てしまいます。
フッターの下に余白がある状態
これはカッコ悪いので、以下のようにフッターはコンテンツ量に関わらず最下部に表示するようにする方法を解説します。
コンテンツ量が少なくてもフッターはページ最下部
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;
}これで大丈夫ですが、スマホで見るとフッターはアドレスバーに隠れることがあります。
例えばこちら。
フッターはアドレスバーの下にある
下にスクロールするとフッターが現れます。
フッターはスクロールすると見える
冒頭のようにフッターの下に余白があるわけではありませんが、フッターをページを開いた時点で表示させるには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");
});するとスマホで開いた時点でフッターは表示されます。
フッターはスマホを開いた時点で表示
まとめ
今回はコンテンツ量が少なく短いページでもフッターを最下部に表示する方法を解説してきました。
LPなど長いページやサンクスページ、404ページなどが無いと気が付かないかもしれませんが、フッターの下に余白があるのは見栄えが良くないのでしっかり確認しておきましょう。
以上になります。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
今だけ！5大無料特典あり🎁
