CSS 100vh is too tall on mobile due to browser UI

Question

What is the best way to solve this issue. Obviously all browsers on mobile have got a UI (address bar etc) at the top. This adds additional height to the viewport, so my website which is using 100vh is missing a section.

I'd assume different browsers have different sized viewports due to this, I could simply do something like height: calc(100vh - 50px) or what ever the height is, but it won't match up on all mobile browsers right?

Answer 1

Usually the 100vh height will account for the adjusted height, with is why you'll sometimes see mobile pages go funky when the browser's address bar slides down.

For browsers that don't account for the sliding bar within the vh unit: The height for the address bars will not be constant across the browsers, so I'd advise against appending -50px.

Try setting the height of the page (using javascript) with the window.innerheight property.

function resetHeight(){
    // reset the body height to that of the inner browser
    document.body.style.height = window.innerHeight + "px";
}
// reset the height whenever the window's resized
window.addEventListener("resize", resetHeight);
// called to initially set the height.
resetHeight();