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 outer wrapper to 100vh and display: flex with column direction.
- Apply “expand” flex-grow to the content area so it fills remaining space and pushes the footer to the bottom.
To ensure your content area expands so the footer stays at the bottom on short pages, you need to use flexbox on the body wrapper to make the layout stretch to fill the whole viewport.
1. Set the Body or Main Wrapper to Full Height
- Select the
Bodyelement (or your outermost wrapper Div). - Set its height to 100vh (100% of the viewport height).
- This ensures your layout fills at least the height of the screen, even with little content.
2. Use Flexbox with Column Direction
- Set the
Bodyor wrapper Div to Display: Flex. - Choose Flex Direction: Vertical (Column).
- This allows stacking of header, content, and footer.
3. Make the Content Area Flexible
- Select your main content section (usually a section or a Div between header and footer).
- Set its Flex Child setting to "Expand".
- This tells Webflow to let the content area take up remaining space between header and footer.
4. Footer Should Remain at the Bottom
- Your footer stays below the flexible content.
- There’s no need to give the footer a specific position; just let the flex layout push it to the bottom.
5. Check Mobile and Tablet Views
- Make sure this flex setup works well across breakpoints.
- Adjust padding/margin inside content sections as needed.
Summary
To push the footer to the bottom even when content is short, use a 100vh flex column layout on the body or outer wrapper, and apply "expand" flex grow settings to the main content area. This ensures the content stretches to fill space while keeping the footer anchored at the bottom.