Footer Won't Stick to Bottom of Page

Design help General
1

Hey there,

My site has 3 pages. The first two pages have enough content to scroll on a 15" Macbook, and the footer performs admirably by sticking to the bottom of the page. The third page, my support page, for some reason doesn’t do the same. The footer floats several pixels above the bottom of the page. The only difference as far as I can see is that the 3rd page doesn’t have enough content to be scrollable. The footer section, container, and content all have the same settings but maybe I’m missing something?

Vexir

Here is my public share link: LINK
(how to access public share link)

2

Hey @Vexir,

Your footer’s currently in position: relative, bottom
If you want it to always stick to the bottom, change it to position: absolute, bottom. Just click on the option on the right of the position absolute and it’ll work.

3

Hey @pulpandmills, thanks for the reply… unfortunately, that doesn’t work :frowning: I changed it to absolute, bottom and it makes it work for the 3rd nonscrolling page, but it causes the footer to float up and overlap the content on the other two pages. Try it yourself, it breaks it.

4

Ah, I get it @Vexir.
Missed out on the fact that you do not have enough content to push the footer down to the base. So on a 27" screen, your footer is in the middle of nowhere. It stays below nicely when I viewed on a 13".

This issue has been discussed a number of times in the forum, and solutions varies based on what you’re looking for:

  1. If you are open to using Flexbox on this page, your solution is here:
    https://help.webflow.com/article/how-to-sticky-footer-using-flexbox

  2. If you want to good hack-around, you can follow @vincent 's suggestion:
    https://discourse.webflow.com/t/im-having-problems-with-making-a-footer-that-works/10011/6

1 Like
5

Hm, I’m trying the flexbox solution but it doesn’t seem to work.

Check out the preview for the support page: https://preview.webflow.com/preview/gamecake?preview=d50fe8c3b0d4a964c75c7a6ce3e3b64e

I wrapped everything in a Flexbox div, and set the section right above the footer to Expand, but the footer still stays floating.

Any idea why, @pulpandmills?

6

Bumping this one again, @pulpandmills. The solutions cited didn’t work :frowning:

7

Anyone have a solution for this? My footer still hangs awkwardly above the bottom of the page. @samliew perhaps?

8

Preview link not working.

9

@samliew whoops, it’s been a while. new link: https://preview.webflow.com/preview/gamecake?preview=1d5a3dcae9092922e73bbf35bb5d5f9d

11

Try viewing it on a different size monitor? This is what I see:

12

Oh I see. I get around that issue using background colours for body like this: Tic-Tac-Toe by samliew (that’s the shortest page on my site)

13

There’s got to be an actual solution out there! For one thing, the Flexbox based solution seems perfectly reasonable to me. I’m not sure why the sections don’t actually expand.

14

Hi!
Have you fixed it?

If not, try this:

Body2 - height:100%
Supercontainer Div - height: 100%, Position: Relative

1 Like
15

@stian not yet, thanks for picking this thread up!

I made the change you suggested for Supercontainer Div , but I’m unable to change the body section’s height to 100% because it’s greyed out and set to Auto, being a flex entity.

FWIW let’s use the Support & Feedback page to sync up on element names, since that is usually the smallest amount of content.

16

I was able to change body to 100% no problem. Pushes your footer to bottom as suggested.

1000×688 72.7 KB

17

Oh gosh, Body 2 means the entire page body. My bad. I thought it was referring to one of the sections.

Works great!

Thanks everyone.

18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.