Skip to main content

How to create a footer that’s always at the bottom of the page

I use a pretty standard structure for laying out basic web pages:

<body>
  <header>This is my header</header>

  <main>This is the main content</main>

  <footer>This is the global footer</footer>
</body>

If I want to ensure the <footer> is always at the bottom of the screen, even if the <main> doesn’t fill the height, the following CSS does the trick (based on a Stack Overflow answer by vsync)

body {
  min-height: 100vh;
  margin: 0;
}

/* The main fills all the space between header & footer */
body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

What’s going on here: