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();

Answer 2

Use height: 100% which gives you the height after reducing the menu bar's height.

You can test the difference between 100vh and 100% by using document.getElementsByTagName('html')[0].scrollHeight on mobile browser.

For me (Chrome on Andriod), 100vh returns a higher value than 100%, which always giving me a vertical scrollbar, even if I haven't added anything in the html body.

Answer 3

The accepted answer didn't work for me. I had to make two adjustments:

• use document.body.style.height instead of document.body.height

• add 'px' to the end of window.innerHeight

  document.body.style.height = ${window.innerHeight}px;

Answer 4

If the element is a direct child of body, you can achieve the desired effect with:

html, body {
    height: 100%;
}

#screenheight {
    height: 100%;
    background-color: blue;
}

<div id="screenheight"></div>
<p>Random content after screenheight element.</p>