コンテンツ量が少ない時でもフッターを最下部に固定する方法です。
以下がHTML・CSSの内容です。
index.html
<body>
<header>
ヘッダー
</header>
<main>
コンテンツ
</main>
<footer>
フッター
</footer>
</body>
style.css
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
"min-height: 100vh;"とすることで、bodyの表示領域が確保されます。
そして"flex: 1;"により、bodyタグ内のheaderタグとfooterタグの高さを除いた部分が、mainタグで埋まるようになります。
これだけでフッターを最下部に固定できます。
補足 - IE11対策
上記の方法だと、IE11環境でコンテンツ内の画像をレスポンシブ対応した場合、フッターの上部に高さが残り余白が生まれてしまいます。
以下のように、mainタグに"min-height: 1px"を指定すると解消されます。
style.css
main {
flex: 1;
min-height: 1px;
}