CSSでフッターの下に隙間ができないように調整する

2022.10.21 | HTML / CSS

昨今４ｋモニターやらなんやらと解像度が大きくもなってきているし、ノートパソコンで作業をする人も増えております。
なのでブラウザの高さがまちまちです。

４ｋモニターでブラウザの高さを広げてみるとよく、フッターの下が空いたりして面倒ですよね。
でもやっぱりフッターはブラウザの下に来てほしいと、しかし、固定もだめなのでその調整方法をいくつかあると思うので少しだけメモ

<html>
<head></head>
<body>

<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>

HTMLはこんなかんじ。

ヘッダー・フッターの高さが固定されている場合

これが一番簡単でmainを全体の高さからheader/footerの高さを引いた値を最小の高さとして指定する。

header{
  height: 100px;
}

main{
  min-height: calc( 100vh - 200px);
}

footer{
  height: 100px;
}

.container{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer{
  margin-top: auto;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}

いくつかの方法を書きましたがまだあるかな？
それぞれにあった方法を選んでお使いください。