Footer and page size

August 5, 2022

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>