What could be causing the issue with the 100vh rule on the nav container in Webflow, particularly on mobile devices where there is some scrollable space?
TL;DR
- Mobile browsers inconsistently calculate 100vh due to dynamic UI chrome, causing layout issues in Webflow.
- Avoid 100vh on mobile by using fixed positioning (top: 0; bottom: 0; etc.), percentage-based heights, or dynamically set height with JavaScript through custom code.
The issue with using 100vh (100% of the viewport height) for a nav container in Webflow on mobile devices often results in visible scrollable space or content being pushed below the viewport. This is due to how mobile browsers handle viewport units.
1. Mobile Viewport Bugs with 100vh
- On mobile browsers, especially Safari and Chrome on iOS/Android, the browser chrome (address bar, toolbar) expands or collapses dynamically, which adjusts the actual viewport height.
- When using 100vh, it initially calculates height including the hidden browser UI, causing the container to appear taller than the visible screen.
- This results in extra space or unintended scrolling, which can disrupt layout or UX.
2. Webflow-Specific Behavior
- Webflow applies 100vh as an inline style or through CSS, which doesn’t automatically update when viewport height changes (e.g., on scroll or UI collapse).
- Webflow does not currently provide a built-in workaround to dynamically update based on actual visible height on mobile.
3. Recommended Solutions
- Avoid using 100vh for full-screen navs on mobile; instead:
- Use 100% height of the parent if its height is constrained correctly.
- Or use min-height with media queries, e.g., set a fixed pixel height for handheld devices.
- Use custom CSS with JavaScript to detect the actual viewport height and set it dynamically (
window.innerHeight), though this requires embedding code via custom code blocks and is outside native Webflow capabilities.
4. Alternative Workaround
- If you need a mobile fullscreen nav, consider:
- Setting the nav container to position: fixed with top: 0, left: 0, right: 0, bottom: 0 instead of using height at all.
- This approach effectively covers the screen without relying on vh units and avoids the mobile bug.
Summary
The issue with 100vh on mobile in Webflow is due to mobile browser behavior that calculates viewport height inconsistently. To fix it, avoid using 100vh for navs on mobile and instead use fixed positioning, percentage-based heights, or JavaScript-calculated heights through custom code.