How can I make the content area in my Webflow layout expand to a height that pushes the footer to the bottom, even on screens with limited content?
TL;DR
- Set the body or a parent wrapper to 100vh height.
- Apply Flexbox with vertical direction and justify content as space-between.
- Make the main content section grow with Flex: 1.
- Ensure the footer has a set or auto height and is placed after the content.
To ensure that the footer stays at the bottom of the browser window even when the page has little content, you need to make your main content area expand to fill the remaining vertical space.
1. Set the Body or Parent Wrapper to Full Height
- Select the Body element in your Webflow project.
- Under the Style panel, set its Height to 100vh (100% of the viewport height).
- Alternatively, wrap your content in a parent Div block called something like “Page Wrapper” and set that div’s Height to 100vh.
2. Use Flexbox to Distribute Space
- Set the parent wrapper (Body or Page Wrapper) to Display: Flex.
- Choose Flex Direction: Vertical (Column).
- Set Justify: Space Between or Justify: Start if you’ll control spacing manually.
- This allows the middle (content) section to grow and ensures the footer is pushed to the bottom.
3. Adjust the Main Content Section
- Select your main content wrapper (e.g. a Div block with your page content).
- Set Flex: 1 (Scroll down the Style panel to the “Flex Child” section and choose “Grow If Possible”).
- This forces the content to fill all remaining vertical space between header and footer.
4. Ensure Footer’s Height is Fixed or Auto
- Make sure your Footer element has a defined height (e.g. 80px) or set to auto with padding.
- Avoid using absolute positioning on the footer unless you have a specific reason.
5. Double-Check on Preview and Publish
- Use the Webflow Preview mode to verify that the footer stays pinned to the bottom on short content pages.
- Publish the site and check it on different screen sizes to confirm consistent behavior.
Summary
To push the footer to the bottom on short pages in Webflow, use a 100vh-height wrapper with Flexbox layout, set the main content area to grow (Flex: 1), and ensure the footer is placed after the content. This creates a layout where the content fills available space and naturally pushes the footer to the bottom of the viewport.