CSS 100vh is too tall on mobile due to browser UI
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();
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>
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.
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
;