コンテンツが少なくてもフッターを一番下に表示させる

一番下のフッターが上がって、コンテンツに重なる

最初の骨組みで、一番下に設置していたはずのFooterが、ふと気づいたら、メインコンテンツの上に鎮座してるってことありませんか？
もしくは、コンテンツが少ないせいでFooterが上に行ってしまい、Footerの下に謎の空白できてませんか？

これはさすがに見目麗しくないので、メインのコンテンツ量にかかわらず、Footerを一番下になるようCSSで指定してあげると、Footerの位置が落ち着きます。

Footerの位置をFlexで指定する

一番簡単そうなのがFlexBox。

ページ全体をBOXにして、FlexのColumnで段組みすると、Footerは、どうあっても一番下にいくので、①のように、メインコンテンツに重なることは防げます。
さらにメインコンテンツのある領域の高さをflex:1にすることで、メインコンテンツの量にかかわらず一定の高さを保ち、Footerを一番下に配置してくれます。

//HTML
<div id="page">
    <header>ヘッダー</header>
    <div id="wrapper">
        <main>メインコンテンツ</main>
        <aside>サイドバー</aside>
    </div>
    <footer>フッター</footer>
</div>

//css
#page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

#wrapper {
    flex: 1;  
    display: flex; 
}

main {
    flex: 1;
}

footer {
    width: 100%;
    height: 120px;
}

#pageの最低の高さを100vhにすることで、サイトデザインは、常にページいっぱいに高さを保ちます。
これでもフッターが上がることがあれば、おまじないでfooter のCSSにmargin-top: auto; を書いてやるとストンと下に落ちます。

Footer の位置を position で絶対指定する

この方法は、下にフッターを固定しちゃうやり方です。
他の要素をいじらず、Footerの親要素とFooterだけに対し、位置を指定します。

//HTML
<div id="page">
    <header>ヘッダー</header>
    <div id="wrapper">
        <main>メインコンテンツ</main>
        <aside>サイドバー</aside>
    </div>
    <footer>フッター</footer>
</div>

//css
#page {
    position: relative;
    box-sizing: border-box;
    padding-bottom: 120px;
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;  
    height: 120px;
}

親要素のpageは基準の相対位置（relative）で指定し、子要素のFooterは、絶対位置（absolute）で指定します。
この時、絶対位置で指定したほう（Footer）は、親のpageからの位置をleftとbottomで指定します。
下に置きたいのでtopである上から指定するより、bottomである下のほうが楽なのでbottomで指定していますが、位置が分かっているのであればtopから指定しても良いです。

さらに、#pageに対し、box-sizingとpadding-bottomを指定し、Footer領域の確保をすることで、メインコンテンツにFooterが重なることを防ぐことができます。

これで何があってもPageの一番下にFooterが配置されます。

FlexBoxを使うか、positionを使うかは、好みもあるし、最初のコンテンツの配置の関係にもよると思います。
ただ、自分が今まで書いたHTMLで、いろんな面で処理が楽だったのは、FlexBoxのほうでした。

最初からこういうこともあるよということを留意して段組みをすると、修正も入れやすいです。