Footer not sticking to the bottom of the page

Trying to figure out what to do with my footer here…it never appears on the bottom of the page unless there is enough content filling up the page to place it there.

This is the scenario

Body is auto
Section is auto
Footer is bottom relative to body

When I change the section to 100% the footer drops to the bottom in all cases except when there is a lot of content.
At this point it just overlaps…

@Crownife
Hi Pavel, I think maybe if you set the body to 100% it may accomplish what you want. Content would still be able to overflow with overflow scroll, but you can set the footer to fixed with a higher z-index and it should stay anchored.

1 Like

this helps me out in one way, though I don’t really want the footer to be scrolling with the page, kind of just want it to be at the very bottom.

it also covers some content on the bottom when the body is 100%

You should be able pad the bottom of the content to bring all of it into view if you are using a fixed / anchored footer that sits on top with the higher z-index.

1 Like

should I be giving each section a z index? or only the footer?

I set the footer to 999

Already, I think I figured this out. I just added padding to all the parts and made it 100%.

Thanks a lot! Appreciate the help.

You will only need the z-index on the footer. Glad to hear you are working it out - good luck on your project.

2 Likes