コンテンツ量が少ない時、フッターの下に余白ができてしまう問題。
調べると、flexboxを使うやり方が割と主流な印象を受けました。
でも、そのやり方だと
<body>
<div class="content">
<header>ヘッダー</header>
<main>コンテンツ</main>
</div>
<footer>フッター</footer>
</body>
このようにフッター以外をdivでラップする必要があって、ちょっと気持ち悪い🤮と思いました。
お気に入りの実装
html
<body>
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
css
body {
position: relative;
}
header {
height: 100px;
}
main {
min-height: calc(100vh - 100px);
padding-bottom: 30px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
追記
すみません。普通にflexboxでいい感じにできました。
この方法だとヘッダーの高さとか気にしなくて良いのでこれが良いです。
<body>
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}