コンテンツが少なくてフッターの下に空白ができてしまうときの対処。
ヘッダーとフッターの高さが固定されているときにしか利用できないけれども。

HTMLはこんな感じを想定

<header>
  ヘッダー
</header>
<div id="main">
  コンテンツ
</div>
<footer>
  ヘッダー
</footer>

#mainのheightをmin-heightとcalc()で指定する。

header {
  height: 50px;
}
#main {
  min-height: calc(100vh - 50px - 50px);
}
footer {
  height: 50px;
}