Floating Footer Fix

Last updated: 2021-03-16

If the height of the footer is unknown, it's best to use flex:

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
}

References

Footer below content, but not floating mid-air if not enough content. (2014, September 4). Stack Overflow. StackOverflow