How to make footer stick to the bottom of a page

Aligning the footer at the bottom of a web page can be surprisingly challenging, even in 2023. However, with this technique, you should be able to achieve a reliable and effective solution.

<div class="layout">
  <nav>...</nav>
  <main>...</main>
  <footer>...</footer>
</div>

.layout {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

At first glance, it may seem that using justify-content: space-between on the .layout element eliminates the need for margin-top: auto. However, if you use this combination and the main content doesn't fill the entire container, it will be vertically centered, which may not be what you want. To maintain the normal top-to-bottom flow of HTML elements, you should use justify-content: flex-start or leave it undefined. To ensure that the footer stays at the bottom of the container, set its margin-top to auto.