footerの位置

どのようにググればいいのかが不明なので自己解決した

qiitaの背景が白なのでわかりづらいですが、下にでかい空白ができてしまいます。ダサい

<div class="wrapper">
  <div class="header">
    header
  </div>
  <div class="kiji">
    記事です
  </div>
  <div class="footer">
    footeer
  </div>
</div>

こんな感じに分割して、cssで

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

min-height: 100vh;こうすれば、最低でもディスプレイの縦幅に高さが固定されます
justify-content: space-between;で記事は真ん中に配置、headerは記事の一番上に固定、footerは記事の一番下に固定
flex-direction: column;で
header
記事
footer
という順に縦に並びます

下の空白が消えました