Fix Fullscreen Fixed Header Jumping Issue on Mobile Browsers
When implementing a fullscreen fixed menu using height: 100vh, you may face an issue on mobile browsers (especially Chrome and Safari) where the menu leaves a visible gap at the bottom when scrolling. This happens because mobile browsers hide the address bar when scrolling, causing the viewport height to increase.
🛑 Problem
Using 100vh doesn't account for dynamic browser UI changes. When the browser chrome collapses, the 100vh value doesn't update, leading to a space or jump in your fullscreen section or menu.
✅ Solution
Use JavaScript to calculate the real visible viewport height and apply it through a custom CSS variable. This approach ensures your fixed menu always fills the correct height regardless of the mobile browser behavior.
Step 1: Add the JavaScript
<script>
function setRealVH() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--real-vh', `${vh}px`);
}
window.addEventListener('load', setRealVH);
window.addEventListener('resize', setRealVH);
</script>
Step 2: Update Your CSS
.fullscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: calc(var(--real-vh, 1vh) * 100);
z-index: 9999;
background: #222;
color: #fff;
}
✅ Result
The fullscreen menu will now correctly adjust to dynamic viewport height changes on scroll. No more gaps at the bottom when the address bar hides or reappears.
📌 Bonus Tip
You can apply this same trick to modals, intro sections, and any other full-screen UI elements that require a stable height on mobile devices.
Author: Sajjad Rogi
0 Comments