The Sticky Footer Problem — Solved in 3 Lines (Finally)

Short page → footer floats mid-screen with awkward space below. A 15-year-old problem with a 3-line modern answer.

The flexbox solution

body {
  min-height: 100vh;          /* at least full screen (100dvh for mobile) */
  display: flex;
  flex-direction: column;
}
main { flex: 1; }             /* main absorbs the spare space */
/* header + footer keep natural height; footer lands at the bottom */

The grid version

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* header | main | footer */
}

Notes

• 100dvh (dynamic viewport height) handles mobile URL bars better than 100vh
• This is "footer at bottom of SHORT pages" — different from position: sticky (pinned while scrolling) and position: fixed (always visible)
• Long pages are unaffected — footer simply follows the content

This site uses the flex version — inspect body and see.