コンテンツ量が少ない時にフッターをページ下部へ固定する

<div class="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>

.wrap {
    position: relative;
    min-height: 100vh;
    padding-bottom: 60px; // フッターの高さを指定する
    box-sizing: border-box;  // ヘッダーやフッターを含む全ての要素の高さ=min-height:100vh;になるように指定する
}
footer {
    position: absolute;
    bottom: 0;
}