メインコンテンツの内容が少なくてもフッターを最下部に固定する方法
コンテンツ量が少なくて、画面高さいっぱいにデザインできない場合でもフッターを画面下部に配置するスタイル定義です。 flexbox と min-height を使って実現します。
フッターを固定する実装
今回実装するイメージは、次のようになります。
作りを単純にするため、大きく分けてコンテンツ部分とフッター部分の2つの入れ物を用意します。この入れ物を上下に並べたいので flexbox を使うよう wrapper を用意します。ここでは、 wrapper を用意していますが body を使っても問題ないです。
<body>
<div class="wrapper">
<div class="contents">
<h1>Contents</h1>
</div>
<footer>
<p>Copyright 1997-2020 BBB All rights reserved.</p>
</footer>
</div>
</body>
外側の wrapper を flex コンテナにしたいので、「 display: flex; 」を指定します。次に flex アイテムを上下に並べたいので「 flex-direction: column; 」を指定します。ここまでで、コンテンツとフッターガー上下に並ぶのですが、コンテンツの量が少ないと画面の下にフッターが配置されません。
.wrapper {
display: flex;
flex-direction: column;
}
そこで、外側の最小高さがブラウザサイズいっぱいになるよう「 min-height: 100vh; 」を指定します。 100vh とすることでビューポートの高さ100%が最小の高さであると指定しています。
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
さらに、flex アイテムの幅と flex プロパティの関係で学んだ余白の扱い方から、 contents 部分に全ての余白が分配されるよう「 flex: 1; 」を指定します。
.contents {
flex: 1;
}
このように、3つのブロックを使うことでメインコンテンツの内容が少なくてもフッターを最下部に固定することができます。
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.contents {
flex: 1;
}
よく見かける形はヘッダー・コンテンツ・フッターの3つで構成されており、この場合も同じような定義で実現することができます。
<body>
<header>ヘッダー</header>
<div class="contents">
<h1>Contents</h1>
</div>
<footer>
<p>Copyright 1997-2020 BBB All rights reserved.</p>
</footer>
</body>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.contents {
flex: 1;
}