Can CSS properties be set on the HTML element in Webflow to make the page height stretch to fit the screen?
TL;DR
- Set the first Section’s height to 100vh in the Style Panel to make it fill the screen.
- Ensure Body and parent divs have height set to auto or 100%, and avoid unintended overflow restrictions.
- Use custom code in Page Settings to target the tag if necessary, and always publish to test responsiveness.
Yes, you can apply CSS properties to the HTML element in Webflow to ensure the page stretches to fit the full screen height. Here's how to do it using Webflow’s interface.
1. Use the Body and Section Elements Correctly
- Webflow doesn't allow direct styling of the
<html>tag, but you can achieve the same effect by styling the Body and Section elements. - The Body element fills the viewport by default, but you can set your first Section (or a wrapper div) to fill 100% of the viewport height.
2. Set the Section to 100vh
- Select a Section that you want to stretch full screen.
- In the Style Panel, set the Height to 100vh (100% of the viewport height).
- This makes that element always fill the screen height, regardless of content length.
3. Ensure Parent Elements Aren’t Restricting Height
- Make sure the Body and any wrapping Div blocks have their height set to Auto (the default) or 100% if necessary.
- Verify that no parent element is applying
overflow: hiddenunless intended.
4. Optional: Use Custom Code for HTML Styling
- If you must style the
<html>tag specifically, you can do so via custom code: - Go to Page Settings.
- Add CSS under Inside
<style>tag in the Header section:- Example:
html { height: 100%; }
- Example:
- Note: Webflow already applies
height: 100%tohtmlandbodyin most default setups.
5. Publish and Test Responsiveness
- Always publish your site to preview the full effect.
- Check responsiveness across devices to ensure
100vhbehaves as expected, especially on mobile (where browser UI can affect viewport height).
Summary
You can't directly style the HTML tag in Webflow's Designer, but applying 100vh height to Sections or Divs and ensuring Body/HTML have 100% height (via default or custom CSS) will make your page stretch to fill the screen.