![Cover image for Mobile issue with 100vh | height: 100% !== 100vh [3 solutions]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F8g0e76gkzxzeb0yp35ad.png)
So there are various ways to size any element on a webpage.
We are familiar with common CSS units px, em, pt (and uncommon one cm, mm, in) with sup...
For further actions, you may consider blocking this person and/or reporting abuse
Is there any solution on the market?
Esp. on IOS14/Safari we have still the same issue (as already mentioned by Leonardo).
I also tried this:
width: -moz-available; /* WebKit-based browsers will ignore this. /
width: -webkit-fill-available; / Mozilla-based browsers will ignore this. */
width: fill-available;
But I cannot get it working.
Any advice to have a real height when the address bar gets away (I urgently need to have a "holy grail" design = fixed header + fixed footer and flexible content-area in the middle)?
Thanks for any direction...
This works for me in Chrome on desktop (i.e. it adds the --vh variable to the style of html), but it doesn't add the --vh variable to the style of html in Chrome on a Google Pixel 5. Is this because the --vh variable is only added when the viewport is resized?
(window.addEventListener('resize'...)
I also added a initial window loaded event, in addition to resize.
I had to add a separate event listener for window's load event to performing the same function to get it to work on mobile.
It is even worse, when you try to adjust to an activated mobile keyboard with 100vh :D
Yeah, seems like mobile browsers are unable to do an implementation of the viewport with simplicity. And 100% height is another nightmare in itself. 🤯
None of those worked on iOS 14
Will have to check on that.