I can’t seem to create a footer that accurately sticks to the bottom of the page where I don’t have to have like 5000 top margin on it? Can someone assist -
Sean
Here is my public share link: https://preview.webflow.com/preview/terrasource?preview=c154a76d4456ae5fd48ec3ac6cc3b6aa
For the footer div set the position to “fixed” and “bottom”.
This will fix it to the bottom of your browser.
The problem you will face now is you will not be able to see the very bottom of your page as you will not be able to scroll down far enough.
To solve this you can add a div to the bottom of your page that has the same height as the footer, given your footer is a fixed height, which in this example it is.
The new div should be left as auto or relative position.
Let me know how it goes.
I don’t see where fixed - bottom is?
Click on the footer div, then go to the style tab.
Scan down until you see the word position, which should be shortly after the margin, padding, width, height area.
Once you find it hover of the options and click on the one that says “fixed” when hovered over. Once you click that new options will appear below it. Hover over the new option buttons until you read “bottom”.
If you have no luck I will take a screen shot tomorrow (can’t now as on tablet)
the issue with that is it slides up and down the screen if you have it as a fixed position - right?
No, if it is fixed, it will stay at the bottom of the screen no matter what. It will never move.
Hope this helps. 
that is not what is happening when I fix mine. It sticks to the bottom of the screen and if you move up or down it stays with your screen.
I believe this can be done with flexbox.
One way to do it is to wrap your whole page in a div and set it to display: flex; and fled-direction: column.
Inside that page wrap, put all your content into a content div, and leave the footer below it in its own div.
Set the flex-grow of the content to 1. Now, the content will stretch to fill any empty space, pushing the footer to the bottom of the page.
Webflow has a tutorial: https://help.webflow.com/video-tutorial/create-a-sticky-footer-at-the-bottom-of-your-website-using-flexbox
EDIT: As per the tutorial, the page wrap needs a min-height of 100vh so it is always as tall as the screen.
Okay, so that is what fixed property is supposed to do. So you do you not want it to stick when you scroll up or down? Meaning you don’t want it to always stick with the screen? 
I want it to always stick at the bottom of the website. Not with the screen 
Yeah, I dont want it to scroll down with the page at all just be at the very bottom.
@seank, did you see my reply to you a few posts up? I’m curious if my suggestion solves your problem.
css calc() can solve this but somehow he wants the footer at the bottom but not visible until you scroll. I think!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
