Sticky footer layout

Keep the footer at the bottom of the window on short pages.

css beginner #layout#flexbox#footer
プレイグラウンドで開く
css-sticky-footer.css
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }