Webflow sync, pageviews & more.
NEW

Can I create a section in Webflow that spans the full height of the browser window, similar to the example webpage?

TL;DR
  • Set the section height to 100vh in the Style panel to match the browser window height.
  • Remove body margins/padding, use flexbox to center content, and verify no overflow or layout conflicts exist.

Yes, you can create a full-height section in Webflow that spans the entire height of the browser window, similar to many modern hero or landing sections.

1. Use 100vh Height Setting

  • Select the Section you want to make full-height.
  • In the Style panel, set the Height to 100vh (stands for 100% of the viewport height).
  • This ensures the section always matches the height of the visible browser window, regardless of screen size.

2. Optional: Remove Margins and Padding on Body

  • Select the Body element and make sure all top/bottom margins or paddings are set to 0.
  • This prevents spacing issues that might make the section fall short of full height.

3. Align Content Vertically (If Needed)

  • Set the section’s Display to Flex (select Vertical direction).
  • Use Justify: Center and Align: Center to position content in the center of the view.

4. Check Overflow and Positioning

  • If you experience scrolling issues, make sure:
  • There’s no inner element with extra top/bottom margins or height larger than the section.
  • Overflow is set to Visible or properly managed if using sticky/absolute elements inside.

Summary

To create a full-height section in Webflow, set the section’s Height to 100vh in the Style panel and ensure there’s no conflicting spacing. Use flexbox to center content if needed and check overall layout settings for proper scaling.

Rate this answer

Other Webflow Questions