はじめに

なんでフッターがコンテンツに被ってるねん！！！

フッターをposition:fixedで固定したからか？

でも下で固定しとかな、コンテンツが少ない時フッターが上にあがってきてしまう。。。

・コンテンツ量が多い時、スクロールしたら下にフッターがある
・コンテンツ量が少ない時、常に下にフッターがある
👆を同時に実現するにはどうしたらいいか・・・

Webのcssを触るのが久々で、結構な時間こんな問題と格闘してしまった。。

cssだけで解決してみせます

<body>
    <div class="wrapper">
        <header>
            <!--グローバルナビなど-->
        </header>
        <main>
            <!--ここにコンテンツの内容-->
        </main>
        <footer>
            <p>Copyright © 2021</p>
        </footer>
    </div>
</body>

.wrapper{
    min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative;/* ←相対位置 */
    padding-bottom: 60px; /* ←フッターの高さを指定 */
    /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}

footer{
    position: absolute;/* ←絶対位置 */
    bottom: 0;
    text-align: center;
}

か、解決した。。。！！

コメントより

別のやり方も教えてもらいました！①

headerとfooterのheightが分かっているならmainのmin-heightをcalc(100vh - var(--header-height) - var(--footer-height))と言う感じに設定してあげればfooterのpositionをabsoluteにする必要はなくなりますよ。
mainの中に下方向マージンが大きく取られたものが入るとfooterが押しやられるので、mainに適当な幅で下方向paddingを入れてやると崩れにくくなります。

@felis さん、ありがとうございます！

別のやり方も教えてもらいました！②

wrapperをフレックスブロックのmin-height: 100vh; flex-direction: columnで縦積みにし、mainをflex: 1 1 auto;にするとmainがフレックスアイテムになって良い具合に伸びます。
というやり方もできます

@right714 さん、ありがとうございます！