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, 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();
body as a const. So in my case I did it this way: function resetHeight() { const body = document.getElementById('main-wrap') body.style.height = window.innerHeight + 'px'}, And then I called this function on mounted lifecycle hook. I think it's somewhat about window.onload in vanilla js.
In modern browsers, you can use the dvh unit, which refers to the dynamic viewport. For more information on these new units, see the relevant can I use and web.dev article.
The accepted answer didn't work for me. I had to make two adjustments:
add 'px' to the end of window.innerHeight
document.body.style.height = ${window.innerHeight}px;
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.
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>You can try this
max-height: dvh;
or
max-height: -webkit-fill-available;
I've faced the same issue, yet this solution worked for me on both Android and Apple devices
@include media(d) {
height: 100vh;
}
@include media(m) {
max-height: fit-content;
}
A simple solution worth mentioning...
Continue to set the height of your element to 100vh, then just declare that element's max-height in js.
$('.top-hero-container').css('max-height', (window.innerHeight + "px"));
Now on page load, your element will be no larger than that declared max-height, so will display fine on mobile. It obviously doesn't account for resizing, but the load overhead is less.
vhwas this problematic on mobile devices. nicolas-hoizey.com/2015/02/…