Skip to content

Instantly share code, notes, and snippets.

@aslamdoctor
Created April 5, 2024 20:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aslamdoctor/7b7174160c6fc0f18687d98499c42870 to your computer and use it in GitHub Desktop.
Save aslamdoctor/7b7174160c6fc0f18687d98499c42870 to your computer and use it in GitHub Desktop.
Fix 100vh issue on mobile
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
.mobile-menu{
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment