Footer is on top. Any solutions without adding a wrapper?

Question

How to make a footer always pressed to bottom?

Whenever I make a new page and there's still no content, considering that my header is fixed, my footer always jumps to top. I want to get rid of this behavior. Maybe there's a solution without adding a wrapper for , and and something that isn't considered a bad practice. If there's no such solution, please, at least give a solution with a wrapper/flexbox.

here red is the footer that's hiding under a fixed header: https://i.stack.imgur.com/qtVKL.png

Answer 1

If you have a little content, try avoid “shrinking” of element.

body {
  display: flex;
}

Content {
  flex: 1;
}

footer {
  flex-shrink: 0;
}

Answer 2

I solved this issue by adding a wrapper class to <main> and specified min-height: 100vh;