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

Answer 1

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;
}

Random content after screenheight element.