stickyを使ったフッターの実装
よく見る残念な実装に、コンテンツ量が少なくフッターが画面下に貼り付かないことがありますが、以下の例はコンテンツ量が少なくても大丈夫でこのコード量なので現時点でもっとも優れた実装だと思います。
<html>
<body>
<main>
ここには色々。100vhを超えるものも入ったり。
</main>
<footer>
これはフッターです
</footer>
</body>
</html>
body { min-height: 100%;}
body > footer {
position: sticky;
top: 100vh; // もしくはbottom: 0
}
stickyの解説
そもそも、position: sticky とはMDNによれば
sticky要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック（直近のブロックレベル祖先、表関連要素を含む）に対して top, right, bottom, left の値に基づいて相対配置されます。このオフセットは他の要素の配置には影響を与えません。 この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先（overflow が hidden, scroll, auto, overlay として作成されたもの）に「粘着」します。 引用元: position - CSS: カスケーディングスタイルシート | MDN
難しい言葉がでてきますが、私なりに簡単に要約するなら「スクロールの機能を持つ直近の包含ブロックにくっつく」ことだと言ってみます。
包含ブロックというのは「widthやheightを%指定したとき、その元となる要素（ブロック）」という理解でまずは大丈夫です。詳しくはMDNのこちらのページで。
stickyの理解のためのデモ
try-change-heightクラスのheight指定部分を色々と触ってみてください。