◆ ページの一番下に隙間なくフッターを配置する
◆ 高さ 100vh を flexbox で真ん中の要素に flex-grow: 1 するかフッターに margin-top:auto を指定
◆ 高さ 100vh を grid でヘッダーとメイン部分とフッターにわける
ウィンドウに固定じゃなくてページの一番下にあるけど ページの中身が少ないときにフッターの下に隙間が出ないようにする方法です

ググれば色々あるのですが 見つかるのは古い方法が多めです
margin と position を使ったりしてますけど フッターのサイズを指定しなくていい方法がいいです

flexbox 1 - margin

レイアウトと言えば flexbox です

<style>
html, body{
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
}
</style>

<div class="container">
<section>body</section>
<footer>footer</footer>
</div>

全体を囲んだ要素 .container の高さを最低 100vh にします
justify-content を space-between にすることで section を上の端 footer を下の端に配置させます

.container の中の要素が 2 つだけならうまくいきます
しかし space-between だと header も入るとうまくいかないです
3 つの要素になると body が header のすぐ下じゃなくて 真ん中に位置することになります
2 つの要素になればいいので header と section をまとめてしまうことで対処できます

<div class="container">
<div>
<header>header</header>
<section>body</section>
</div>
<footer>footer</footer>
</div>

でも気持ち的には header, section, footer が同じ階層に並んでいてほしいですよね
出来る限りなくていい div を減らしたいですし

最後だけ下にもっていけないかと方法を探していたら Stackoverflow で良い回答をみつけました
https://stackoverflow.com/questions/33924655/position-last-flex-item-at-the-end-of-container

margin に auto をつけると自動で広がるので justify-content の代わりに footer に margin-top:auto をつけます
<style>
html, body{
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
}
footer{
margin-top: auto;
}
</style>

<div class="container">
<header>header</header>
<section>body</section>
<footer>footer</footer>
</div>

これで header と section が上に並んで footer だけが下に表示されます

flexbox 2 - grow

ここまでの方法だとスクロールバーがない状態だと section と footer の間は margin 扱いです

真ん中は全部 section の領域にしてしまうこともできます
こっちはもうちょっと簡単です
margin は使わずに section に flex-grow: 1 を指定します
これで自動で section が広がるので header と footer 以外の空間が全部 section になります

<style>
html, body{
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
}
section{
flex-grow: 1;
}
</style>

<div class="container">
<header>header</header>
<section>body</section>
<footer>footer</footer>
</div>

grid

flexbox より新しい機能の grid も使えます

<style>
html, body{
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header{
grid-row: 1;
}
section{
grid-row: 2;
}
footer{
grid-row: 3;
}
</style>

<div class="container">
<header>header</header>
<section>body</section>
<footer>footer</footer>
</div>

3 行 1 列に並べて header と footer は中身の要素に応じて自動サイズ 残りの section は自動で広げるようにしてます


position と margin で頑張る方法よりはわかりやすくなったと思います