コンテンツ量が少ない時でもフッターを最下部に固定する方法です。
以下がHTML・CSSの内容です。

index.html

<body>
    <header>
        ヘッダー
    </header>

    <main>
        コンテンツ
    </main>

    <footer>
        フッター
    </footer>
</body>

style.css

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

"min-height: 100vh;"とすることで、bodyの表示領域が確保されます。
そして"flex: 1;"により、bodyタグ内のheaderタグとfooterタグの高さを除いた部分が、mainタグで埋まるようになります。
これだけでフッターを最下部に固定できます。

補足 - IE11対策

上記の方法だと、IE11環境でコンテンツ内の画像をレスポンシブ対応した場合、フッターの上部に高さが残り余白が生まれてしまいます。
以下のように、mainタグに"min-height: 1px"を指定すると解消されます。

style.css

main {
    flex: 1;
    min-height: 1px;
}

参考記事
https://503dg.jp/blog/design/sticky-footer.html