おぼえがき

コンテンツ量が少ないときはブラウザの下部に固定。
コンテンツ量が多いときは成り行きでページの一番下に表示。

• 高さ可変に対応「position:sticky;」を使用する方法（使用中）
• 高さ可変に対応「Grid Layout」を使用する方法
• 高さ可変に対応「flexbox」を使用する方法
• フッターの高さ固定で「min-height:calc()」を使用する方法
• フッターの高さ固定で「position:absolute」を使用する方法

01. 高さ可変に対応「position:sticky;」を使用する方法

「position: sticky」は2カラムのサイドナビ等に使われることもある。

02. 高さ可変に対応「Grid Layout」を使用する方法

一昔前ではグリッドレイアウトをサポートしていないブラウザがあったけど、今ではほぼ全てのブラウザで対応してる

03. 高さ可変に対応「flexbox」を使用する方法

「flex:1」はflex-grow:1;、flex-shrink:1;、flex-basis:0;と同じこと
「flex」はflex-grow、flex-shrink、flex-basisを設定するショートハンドのこと

mainに「flex:1」を設定し、ヘッダとフッタには何もしていない=0という事なのでmainが幅いっぱいに伸びる事になる

04. フッターの高さ固定で「min-height:calc()」を使用する方法

コンテンツ部分にcalc()で最低の高さを調整する方法

コンテンツ部分とフッター部分を合計して最低の高さが画面の高さ100％になるよう設定する

こちらはフッターの高さ指定が必要なのがデメリットです。高さの増減がない場合に使える方法です。

05. フッターの高さ固定で「position:absolute」を使用する方法

フッターに「position:absolute」を設定する方法

フッターの高さを指定し、その高さの分だけ全体を包む要素（ここではbody）にmarginを設定しています。

フッターの高さを指定しなければいけないのがデメリット

ボリュームのあるフッターで高さの増減が見込まれる場合にはその都度修正が必要になってしまいます。
コピーライトのみといった場合にはよいかと思います。