Footer Won’t Stick to Bottom of Page

While on some of my pages the footer sticks correctly to the bottom of the page, here are some examples on how it sometimes floats several pixels above the bottom of the page.

Right know the footer is set to a relative position. I tried absolute, but the footer just disappears. If I fix it at the bottom of the page, the footer appears at the bottom of the page ALL the time (instead of showing just at the end of the scroll).

How can I fix it to the bottom? With no gap? :thinking:

Published site gap between the footer and the bottom of the page:

The way I want it (and the way I see it on the designer)


Here is my site Read-Only: [LINK]

if you want it at the bottom all time:
Set your footer to position fixed bottom. Then add a width:100% to it… And add the green background to it.

It will then stay at the bottom of the page always.

Thank you, Elvira! The thing is that I don’t wish the footer to be fixed at the bottom all the time, but I do want it fixed to the bottom once I’ve scrolled the site to the bottom.

Right know, when I publish my site, sometimes the footer isn’t fixed to the bottom, but an awkward white gap appears between the footer and the bottom of the site.

Can you show me a screenshot of that gap?

Okay, I think I solved the issue by adding more content to the page. It seems that the height of the page (the only one on the site that didn’t need scrolling) was not enough to push the footer to the bottom.

Does that make any sense?

That does make sense. When the page is less filled with content than 100% height it can create issues, based on how you create your design.

I thought you wanted the footer to be more of a nav bar to be shown in screen the whole time, so I understood it incorrectly. Glad you made your own fix :slight_smile:

1 Like

Thanks anyways, @ElviraNL!
It’s a cool feature to use in a future project.