Footer and page size

Question

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?

So it’s kind of sticky but in reverse? (: – Andy Aug 05 '22 at 10:20 — Andy, Aug 05 '22 at 10:20
https://css-tricks.com/couple-takes-sticky-footer/ – CBroe Aug 05 '22 at 10:23 — CBroe, Aug 05 '22 at 10:23

score 1 · Accepted Answer · answered Aug 05 '22 at 10:23

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>

Footer and page size

1 Answers1