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 miscalculate
100vhdue to dynamic UI elements, causing scroll issues and layout shifts. - Use
100dvh, JavaScript-based height adjustments, or Flex/Grid layouts with relative heights to ensure consistent nav sizing across devices.
The issue with using 100vh on a nav container in Webflow, especially on mobile devices, often results in unwanted scrollable space. This is due to how mobile browsers handle dynamic viewport height and UI elements like the address bar.
1. Understand How 100vh Works on Mobile
- On desktop,
100vhequals the full visible height of the viewport. - On mobile, browsers like Safari and Chrome include or exclude the browser UI (address bar, toolbars) when calculating
100vh, depending on user interaction. - Because the visible area changes when a user scrolls,
100vhcan exceed the actual visible part of the screen, creating unintended overflow.
2. Common Symptoms on Mobile
- Extra white space or scroll area appears beneath or around the nav container.
- Content below the container is pushed or partially hidden.
- Autofocus or popups may cause the screen to jump due to dynamic height recalculation.
3. Use Alternative CSS Units or Fixes
- Use
100dvhinstead of100vhwhere supported (modern mobile browsers supportdvhfor "dynamic viewport height"). - Set
overflow: hiddenon the body or parent containers only when appropriate to avoid scrollbars. - Apply
height: 100%on html and body, then use Flexbox or Grid within the nav container to handle auto layout more responsively. - Test with and without mobile browser UI (e.g., address bar visible vs. hidden) to see the layout shift.
4. Webflow Workarounds
- Webflow does not natively support
100dvhyet, but you can: - Add a custom style tag in the Page Settings or Embed:
height: 100dvh;on the nav container class. - Use custom JavaScript to calculate window.innerHeight and apply it as inline CSS to the element (
element.style.height = window.innerHeight + 'px';). - Apply this adjustment on page load and window resize events to keep it dynamic.
Summary
The 100vh issue on mobile is caused by dynamic UI elements altering the actual viewport height. Use 100dvh, JavaScript height fixes, or avoid full-height nav altogether by relying on Flex layouts or relative height values for better control across devices.