CSS footer that is always on the bottom of page

Question

I am having issues making a footer that is always on the bottom of the page. If it is fixed, I'm having the issue that it is overlapping the content that follows, otherwise if I don't have enough content on my webpage it is in the not at the bottom anymore.

My current CSS with the fixed footer:

header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.navigationbar {
  overflow: hidden;
}

.navigationbar .element {
  float: left;
  display: block;
  border-radius: 2px;
}

body {
  margin: 0;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}

Answer 1

Try something like this

footer { margin-top: auto; }

body { display: flex; min-height: 94.5vh; flex-direction: column; justify content: flex-start; }