How can I fix the issue with my Webflow site's footer floating above the bottom of the page on the third page, even though it has the same settings as the other pages?
TL;DR
- Ensure the page wrapper uses a vertical flex layout with min-height set to 100vh to push the footer to the bottom even with little content.
- Compare structure and styles with working pages to find inconsistencies, hidden elements, or overrides causing layout issues.
If your Webflow site’s footer floats above the bottom on one specific page, but works correctly on others with identical settings, the issue likely stems from differences in page content height or page structure. Here's how to identify and fix it.
1. Check Page Content Height
- If a page has too little content, the footer won't naturally be pushed to the bottom.
- To force the footer to the bottom, you'll need to make the page fill the viewport.
2. Apply Full-Height Layout Structure
- On the affected page, make sure the body > wrapper element (often a “Page Wrapper” or “Main Wrapper”) has these settings:
- Display: Flex
- Flex Direction: Column
- Min Height: 100vh
- Inside this wrapper, structure your layout like:
- Header
- Main Content (set flex: 1 0 auto or flex-grow: 1 if using custom style)
- Footer (set flex: 0 0 auto)
This structure ensures the footer stays pinned to the bottom even if there isn’t enough content.
3. Compare Page Structures
- Open both the working and broken pages in the Designer.
- Check for consistent:
- Wrapper class usage and layout structure
- Footer positioning and styles
- Any extra negative margins, unusual position settings (like absolute or fixed), or padding that could float the footer
4. Look for Hidden Elements or Empty Space
- An empty section with height or margins might create unexpected gaps.
- Use Navigator Panel and preview mode to identify hidden or invisible elements affecting layout.
5. Check For Overridden Styles
- Verify if the affected page has any page-specific styles applied to footer or parent wrappers.
- Look for style overrides on combo classes or page-level styles using the Style Panel.
6. Use Webflow’s Preview and Publish
- Always use Webflow’s preview and publish the site to test changes across live breakpoints.
- Sometimes display inconsistencies only show after publishing.
Summary
To fix the “floating footer” issue on one page, ensure that the page wrapper uses flex vertical layout with 100vh height, and the content is structured to allow the footer to naturally pin to the bottom. Cross-check the working pages for consistent layout settings, and look out for conflicting styles or empty containers.