Html – 100vh height when address bar is shown – Chrome Mobile

address-barcssgoogle-chromehtmlmobile-chrome

I came across this problem a few times and was wondering if there was a solution to this problem.
My problem occurs on the Chrome mobile app. There, you can scroll down a bit and the adress bar disappears. So far, so good, let's make an example:

The containers height is set to 100vh.

How it looks with the address bar

As you can see, the bottom part gets cut off.

When I scroll down, it looks like this:

enter image description here

Now it looks good. So obviously Chrome calculates the address bars height into the viewport height. So my question is:

Is there a way, that it looks the same with or without the address bar? So that the container expands or something?

Best Answer

As per this official article on Chrome web, the proper way to set the height to fill the visible viewport is with height: 100%, either on the <html> element or on a position: fixed element. As the document describes, this ensures compatibility with mobile Safari and is independent of how large the URL bar is.

Related Topic