What is the best practice for keeping the footer at the bottom of a Webflow page?
Published on
September 22, 2023
To keep the footer at the bottom of a Webflow page, it is important to follow best practices in web design and utilize the available tools in Webflow. Here are some steps to achieve this:
- Set the page structure:
- In the Webflow Designer, make sure the body element covers the entire height of the page.
- Set the body element's position to relative.
- Create a wrapper:
- Add a div block element inside the body element and name it "wrapper".
- Set the wrapper's position to relative and its height to 100vh (viewport height).
- Add content:
- Place all the page content, including the footer, inside the wrapper element.
- Adjust the height of the wrapper based on the content added.
- Set footer styling:
- Select the footer element and set its position to absolute.
- Set the footer's bottom property to 0, to make it stick to the bottom of the wrapper.
- Adjust any additional CSS properties (e.g., padding, background) to style the footer as desired.
- Adjust page height:
- If the page content exceeds the viewport height, the footer may become hidden.
- To avoid this, adjust the height of the wrapper element by selecting it, opening the Element Settings panel, and adjusting the height.
By following these best practices, you can ensure that your footer remains at the bottom of a Webflow page, regardless of the content length or viewport height.
Additional Tips:
- It's important to test your webpage on different devices and screen resolutions to ensure the footer remains at the bottom consistently.
Example CSS
body { position: relative;}.wrapper { position: relative; height: 100vh;}footer { position: absolute; bottom: 0;}Example HTML structure
<body> <div class="wrapper"> <!-- Your page content here --> <footer>This is the footer</footer> </div></body>Three additional questions:
- How do I create a sticky footer in Webflow?
- What is the difference between a fixed footer and a sticky footer in Webflow?
- Can I make the footer stick to the bottom of the viewport on certain pages only in Webflow?
