How to fix the issue of a Webflow site extending beyond the bottom of the browser when using 100vh or fixed position for elements?

TL;DR

Replace problematic 100vh units with min-height: 100% or percentages to avoid overflow, especially on mobile.
Use custom JavaScript to define a CSS variable (--vh) for accurate viewport height and apply it via calc(var(--vh) * 100).
Review and constrain fixed elements, ensure overflow settings are appropriate, and debug using Webflow tools to identify 100vh and fixed-position usage.

When a Webflow site extends beyond the bottom of the browser, it's often due to misused 100vh units or fixed-positioned elements not accounting for address bars or dynamic UI on mobile devices.

1. Understand How 100vh Acts on Mobile

On mobile browsers, 100vh includes the hidden URL bar space, which can cause content to overflow off-screen.
This means elements with height: 100vh may visually exceed the actual visible height of the viewport.

2. Use `100%` or `Min-Height` Instead of `100vh`

Try replacing 100vh with min-height: 100% or using percentages relative to the parent container.
Set your section to min-height: 100% or toggle to Auto height in Webflow Designer and manage spacing with padding instead.

3. Use a Custom CSS Variable for Viewport Height (Advanced)

Create a workaround using JavaScript to calculate the true viewport height and set it in a CSS variable:
In Page Settings > Before body tag, add this minimal JavaScript:
- *_window.addEventListener('resize', () => document.documentElement.style.setProperty('--vh', window.innerHeight _ 0.01 + 'px')); window.dispatchEvent(new Event('resize'));**
Then in Webflow, set your section’s height to calc(var(--vh) * 100) using a custom CSS class in Embed or custom code.

4. Watch Out for Fixed Elements with Overflow

Fixed-position elements (e.g., navbar, side panels) may push layout off-screen if their dimensions aren't constrained.
Ensure they don't add unwanted height by:
Avoiding extra margin or padding.
Setting bottom: 0 in Webflow styles if they must stick to bottom.
Checking z-index stacking to ensure layering doesn't affect layout.

5. Check for Overflow Hidden and Scrollbars

Use overflow: hidden on the Body or specific sections cautiously. It might hide scrollbars but allow invisible content to remain.
In Preview mode, look for unwanted vertical white space or scroll.
In Designer, select the Body and check if it has Overflow: visible accidentally set.

6. Use Webflow’s Debugging Tools

Press CMD/CTRL + Shift + P in Designer to search for all elements using 100vh.
Use Webflow's Navigator panel to track elements with height set to 100vh or fixed position.

Summary

To fix your Webflow site extending below the viewport, avoid relying solely on 100vh, especially on mobile. Use min-height, percentages, or dynamic custom CSS with JavaScript. Review fixed-positioned elements and check for unintended overflow to ensure everything fits within the visible screen area.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer