Can CSS properties be set on the HTML element in Webflow to make the page height stretch to fit the screen?
TL;DR
- Set Body (All Pages) Height to 100vh or Min Height: 100vh in the Designer.
- Ensure sections, containers, or wrappers have proper height settings, using Min Height: 100vh if needed.
- Optionally, add custom CSS in Project Settings:
html, body { height: 100%; }for full-page height.
Yes, you can set CSS properties on the <html> element in Webflow to ensure the page height stretches to fit the screen. Here’s how:
1. Set the Body to Full Height
- Go to the Designer, select the Body (All Pages) element.
- Under Styles, set Height: 100vh (viewport height) or Min Height: 100vh to ensure it covers the full screen.
2. Ensure Parent Elements Stretch
- If the page still doesn’t stretch, check that sections, containers, or wrappers have proper height settings.
- Use Min Height: 100vh on the main wrapper or section to ensure they expand fully.
3. Use CSS for the <html> Element (Optional)
- Go to Project Settings > Custom Code and add the following within the
<style>tags inside the Head Code section: html, body { height: 100%; }- This applies a full-page height structure globally.
Summary
To make a Webflow page stretch to fit the screen height, set Min Height: 100vh on the Body and main sections. If necessary, add custom CSS in Project Settings to ensure the <html> and <body> elements take up full height.