How to work with 100vh on mobile devices

Design help General
1

Hi community,

I know this has been a known issue for mobile browser but I couldn’t find a way to fix it. Basically I’m setting a 100vh section with a background image. It works well on desktop but when I tested it on my phone, there is a small amount of background image below the fold. I tried to enter the custom css and javascript code below but still didn’t work. Can someone help me with this?

image
image1170×2532 72.6 KB

Here’s the code I used:

.homepage_container { height: 100vh; height: calc(var(--vh, 1vh) * 100); }

< script>
// 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);
});

And here is my preview link: Webflow - Victor Wang Portfolio - Design & Stuff

2

Not sure if you have overcome this issue, but if you did, mind sharing how you managed to do so?

1 Like
3

hi @evaldas_sedys and @Victor_Wang the code how it is now will never work. At first used code was copied from some website and pasted without formatting as it has still issues with dashes -- and quotes "".

Anyway the major reason why is not working is that browser doesn’t know what to calculate as there is missing major property in <head>. I will skip issues that are related fixing formatting issues as I have pointed to all of these in image below.

Current issues
Current issues1879×906 350 KB

I will jump straight to major issue and this is missing property with auto-calculated height that browser will take as starting point.

Here is an image of property that should be assigned to <head> tag and this property always hold current value in real time.

auto-calculated height
auto-calculated height1010×93 35.6 KB

to inject this property and its value into <html> tag we can use this function

const appHeight = () => {
 const doc = document.documentElement
 doc.style.setProperty("--vh", `${window.innerHeight}px`)
}
window.addEventListener("resize", appHeight)
appHeight()

In simple explanation the function appHeight() will invoke when DOM is loaded first time and then will listen (addEventListener) for any height change (resize) , when detect change it will invoke again. As you can see browser returned value is innerHeight and not clientHeight (if you do not know what are the differences please visit MDN for information) Now is one important part done.

Next we need set CSS the way to be able work with value of this property. If someone is not familiar with -- this is how variables are set in CSS.

To make it work we need set in :root custom variable --vh:100% . In short the value (auto-calculated) “passed” into CSS from <head>will be always 100%. (This initial setting is missing in @Victor_Wang page)

:root {
 --vh: 100%;
}
html,
body {
 padding: 0;
 margin: 0;
 overflow: hidden;
 width: 100vw;
 height: 100vh; /* as fallback */
 height: var(--vh);
}

So here we have the basic setup. It should work and if not check the code again or use internet as there is many great articles how to

Hope this will help understand at least the basic setup. :wink:

1 Like
4

Thanks for this @Stan ! I implemented your fix and it has worked perfectly, with just one minor issue: the suggested CSS includes overflow: hidden; which prevents page scrolling. Removed this line and it works exactly as expected.

2 Likes