デザイン
2021.05.17
【CSS】コンテンツが少ない時も！フッターを最下部に表示する方法！
Not foundページや、お知らせ一覧ページなどのコーディング中に
コンテンツ量が少なくて
フッターが画面の最下部に来ない‥‥
なんて経験はありませんか？
コンテンツ量が少ない
↓
ブラウザ全体の高さに対して、コンテンツの高さが足りてない
という状態のため、フッターの下に余白ができてしまいます。
できれば他のページと同じ表示にしたいですよね。
今回は解決法を2つご紹介します！
解決法① position:fixed;
フッターをfixedで画面最下部に固定してしまう方法です。
<footer>
<p>フッターフッターフッター</p>
</footer>footer{
position: fixed;
}ただ、トップページなどのコンテンツ量が多いページでも
最下部に常に表示されてしまいます。
コンテンツ量が多い時はスクロールで表示したい！時は
次の解決法を試してみましょう。
解決法② display:flex;
横並びで使用することが多いflexboxですが
flex-direction:corumn;との組み合わせると
CSS4行でfooterを固定する事が出来ます！
<body>
<header>
<h1>タイトルタイトルタイトル</h1>
</header>
<main>
<p>テキストテキストテキストテキスト</p>
</main>
<footer>
<p>フッター</p>
</footer>
</body>body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}・flex-flow: column;
横並びで使用するflexboxですが
columnと併用で縦並びに
・min-height: 100vh;
bodyの最小の高さ＝画面の高さに
・flex: 1;
mainの最小の高さ＝画面の高さｰ他の同レイヤーの要素の高さに
まとめ
サイト内の見た目の統一はとても重要です。
用途にあったCSSを使いこなしましょう！
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
