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
- Set the Body to min-height: 100vh and ensure the Page Wrapper uses vertical flex layout with space-between.
- Confirm the footer is inside the main wrapper, not absolutely positioned, and compare structure/layout with working pages to fix missing or broken elements.
Your Webflow footer is floating above the bottom of the page likely due to insufficient content height or missing layout settings on the third page.
1. Check Page Body Height Settings
- Ensure the Body element is set to 100% height. This allows the page to stretch the full browser height even when content is limited.
- Select the Body (All Pages) element and make sure Height = Auto and Min Height = 100vh.
2. Confirm Page Wrapper Layout
- If you’re using a main page wrapper (e.g., a div called
Page Wrapper), make sure: - It spans the entire viewport: Min Height = 100vh.
- The layout is Flex – Vertical (Column).
- Justify: Space Between so the footer sticks to the bottom when content is short.
3. Inspect Missing or Broken Structure
- Compare the working pages’ structure with the third page:
- Check if any wrapping divs are missing or renamed incorrectly.
- Ensure the Footer component is inside the main wrapper and not outside of the body or page content.
4. Look for Positioning Issues
- Check if the Footer or other components are set to Absolute or Relative positioning unintentionally.
- For the Footer, use Display: Block or Flex, and Position: Static or Relative (not Absolute unless specifically intended).
5. Check for Hidden Content or Overflow Settings
- There may be hidden content or elements with overflow: hidden or a defined height that cuts off content.
- Make sure all containers expand with content properly.
- Inspect with Webflow’s Preview mode and in the browser Developer Tools to identify layout gaps.
6. Test in Publish Mode
- Some issues may only appear in the live site. Always publish the site and test there, as Webflow’s Designer preview is not always identical to the published site in layout behavior.
Summary
To fix the floating footer, ensure your third page’s layout includes a wrapper with min-height: 100vh, uses vertical flex layout with space-between, and verify the footer is positioned correctly within the page structure. Match these settings against your working pages to identify what's missing.