コンテンツ量が少ないページをコーディングした際に、フッターの下に余白ができてしまったことから、コンテンツ量に応じてフッターの位置を変えるCSSを調べて実装してみました。備忘録として残していきたいと思います。
完成イメージ
コンテンツ量が少ない場合、フッターはブラウザの下部に固定させ、
コンテンツ量が多い場合、フッターはコンテンツの下に表示させる形を完成イメージとします。
Flexboxを使う方法
display: flexで指定する方法です。
こちらの方法は、.wrap内に要素を追加しても.footerが下部に固定されるためよく使用する方法です。
HTML
<div class="wrap">
<header class="header"> </header>
<div class="contents"> </div>
<footer class="footer"> </footer>
</div>
CSS
.wrap{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer{
margin-top: auto;
}
Grid Layoutを使う方法
display: gridで指定する方法です。
HTML
<div class="wrap">
<header class="header"> </header>
<div class="contents"> </div>
<footer class="footer"> </footer>
</div>
CSS
.wrap{
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100vh;
}
まとめ
コンテンツ量が少ない時だけフッターを下部に固定する方法をご紹介しました。
私自身display:flexの方が使用頻度が高かったのですが、display:gridで指定する方法は1箇所書き加えるだけで実装できるため、今後使用していきたいと思いました。
