【CSS】メインコンテンツの高さに関わらずフッターを最下部に固定する

ヘッダー・メインコンテンツ・フッターの3つから構成されるHTMLレイアウトにおいて、上記のように高さが足りずともメインコンテンツを引き伸ばし、フッターを最下部に固定したい。

解決法

<div>
  <header></header>
  <main></main>
  <footer></footer>
</div>

div {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

任意の親要素を用意し、その要素に対してGrid Layoutを指定。grid-template-rows: auto 1fr autoでメインコンテンツのみを引き延ばすことで実現できる。

div {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

Flexboxでも実現できるが、子要素にflex-grow: 1をあてる必要がある。