Footer and page size

Feels like should already know how to achieve this effect, but I don't, so here goes:

I want footer to be placed at the bottom of the page if there is not enough content and if the page is filled I want it to be after all the content. So when you scroll it's not sticky.

Could you please help with this?

Solution

This can be achieved easily using Flexbox and setting min-height: 100vh to the main container.

I would suggest having a look at the Flexbox documentation (from MDN).

<body>
<div style="min-height: 100vh; display: flex; flex-direction: column;">
  <header>
    Header
  </header>
  <main style="flex: 1 0 auto; background: red;">
    Some content.
  </main>
  <footer>
    Footer
  </footer>
</div>
</body>