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?

A 100vh layout issue on mobile devices typically happens when the browser's UI (like the address bar or navigation controls) interferes with the viewport height. This causes unexpected scrolling or layout bugs.

1. Understand How Mobile Viewports Work

• On mobile browsers, 100vh includes the height of the whole viewport, even areas obscured by browser UI.
• As users scroll, the address bar hides or shows, effectively changing the visible screen height.
• This can cause elements sized to 100vh (like a nav container) to overflow and become scrollable.

2. Use Alternative CSS Strategies in Webflow

• Webflow does not currently offer a built-in way to use dynamic viewport units like 100dvh.
• A workaround is to apply custom CSS through the Page Settings or with custom code using a CSS variable (like setting a min-height with JavaScript).
• You can insert a script in Page Settings > Before tag with something like:
• --vh set to window.innerHeight * 0.01, then use height: calc(var(--vh) * 100) in your CSS.
• This ensures the height respects the actual visible height of the mobile browser viewport.

3. Check for Unintended Overflow in Your Webflow Layout

• Select the nav container in Webflow and check for child elements that may be pushing the height or causing overflow.
• Inspect and disable overflow: scroll or auto on elements that shouldn’t allow scrolling.
• Make sure no hidden padding or margin is being added to the body or html elements on mobile breakpoints.

4. Add Overflow Controls

• Set overflow: hidden on body/html or on the 100vh nav container, if scrolling is not intended.
• If you need content to remain scrollable inside the container, apply overflow-y: auto only to the content area.

5. Test on Actual Devices

• Emulators sometimes do not reflect the true behavior of address bars on mobile.
• Test on real mobile browsers (e.g., Safari iOS, Chrome Android) to confirm and refine your layout fixes.

Summary

The 100vh bug on mobile is caused by mobile browser UI affecting viewport height. To fix it in Webflow, use JavaScript to create a custom --vh unit and apply it with height: calc(var(--vh) * 100). Also check for overflow issues or unintended content height inside your nav container.