Getting the Footer to Stay Put!

Ask us anything How do I?
1

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;
}

2

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!

3

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!

4

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.

5

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.

6

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!

7

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.

8

What i did:

Separate by sections: header / section1 / footer

Then at the first container inside the section1 i changed:
Sizing > min-height: 100vh

It worked at any screen size, table or phone size.

I think its all about knowing how to work with small and big screens that we need to pay attention because we dont know the user screen size.

Only changing the section1 height to 100vh can make an white gap between the section1 container and the footer.

For me the best option is to only change the height of the first container inside the section1 to 100vh (Sizing > min-height: 100vh)

And if u put another container inside the body section, maybe u want the first container to not be 100vh anymore, cause u can have another container under it, so u can just change like:

first container: 30vh height
second container: 70vh height

the important is to have at least 100vh total.

it applies to having another section, u can change the first section container to 30vh and the second section container to 70vh too