Getting the Footer to Stay Put!

Any tips for getting the footer section to stay on the bottom of the page? I have trouble with footers migrating up the page fairly frequently.

So far, I have tried adding a blank section between the page content and the footer, and also applying this CSS to the footer element:

{
width: 100%;
bottom: 0;
position: absolute;
}

Hi @kyanaloe,

I’m not sure I understand. If the footer is the last section on the page, it shouldn’t be going up the page at all. Is it possible you have custom code causing the behavior?

Can you maybe record a loom to show us around the page and the settings on the footer section so we can figure out what’s going on?

Thanks!

Hi Joyce
I’m having the same issue. Footer section is part way up the screen in the app when the content does not take up a full screen. Can you help?

Thanks!

I see what you mean, you must have the body/container (parent of the footer) to be minimum height of vh(viewport height). If the footer is a section which has fixed/absolute position, you must set the position to bottom of 0.

position absolute is relative to the parent position/size. Fixed is otherwise, it is relative to viewport. Since I don’t know how weweb manage the div container, fixed is better choice for you. However having that you wouldn’t be able to scroll through the footer and it will be weird. The most suitable option is setting a parent container with min-h to vh and put the footer inside and then use position absolute/justify-end.

Thanks for the replies - The best way in WeWeb at the moment seems to be to have one single page section that has the top menu and footers built as containers inside it rather than their own sections. Then the single page section can be set to 100vh.

If anyone else has any ideas then do let me know!

Ok, @NeilF, that was helpful. I can’t put all of my containers into one section, for a number of reasons. But! You helped me realize that I can set the minimum height of the main/body section of the page to 100 vh. Just introduced this for the first time, but I think it is working.