URL Bar on Android Chrome makes full height content hidden unless user scrolls using 100VH Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of URL Bar on Android Chrome makes full height content hidden unless user scrolls using 100VH without wasting too much if your time.

The question is published on by Tutorial Guruji team.

This is a hard one to try and explain, so please bear with me.

I have essentially 3 divs, Head, Content and Footer.
The footer always is hidden on Android because for some reason the browser gives me a 100vh size that isnt equal to the actual view height. The damn URL bar seems to cover some.

So the user needs to scroll on the page to hide the URL bar and then see the footer.

yet on other browsers and phones the browser reports 100vh as what is visible including the URL bar.

Googled for hours and not many people seem to have this problem, the ones that do dont seem to find a useful fix.

Anyone got any ideas what to do to get a 100% height HTML page using 100vh and actually not mess up the application on every other phone or device that isnt using google chrome for android.

I found this update by Chrome that covers what they did with plenty of complaints and yet they went ahead and did it.

https://developers.google.com/web/updates/2016/12/url-bar-resizing

Cant find a good workaround for their trickery.

Any ideas?

Answer

That’s a pretty common issue – and the issue is not considered a bug, here’s an article on that topic:

https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

This may be solved by CSS environment variables env() as suggested in CSSWG:
https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

We are here to answer your question about URL Bar on Android Chrome makes full height content hidden unless user scrolls using 100VH - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji