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?


Usually the 100vh height will account for the adjusted height, which is why mobile pages often go funky when the browsers with sliding address bar slide them down; however, obviously there are so many mobile browsers you can't rely on this.

The height for the address bars will not be constant across the browsers, so I wouldn't advice appending -50px.

Try setting the height (within javascript) with the window.innerheight property.

window.onresize = function(){
    document.body.height = window.innerHeight;
window.onresize(); // called to initially set the height.

Excuse any errors, I haven't worked with JS in a while.


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;

  • 1
    probably because you had a CSS height already, which would override the HTML height. What you did was override that CSS – Tobiq Dec 13 '18 at 13:20

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>

Your Answer

