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).

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

Leave a Reply