100vh height when address bar is shown - Chrome Mobile

html css google-chrome address-bar mobile-chrome
Tobias Glaus picture Tobias Glaus · Oct 17, 2018 · Viewed 37.3k times · Source

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?

Answer

Ross Light picture Ross Light · Nov 24, 2019

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 questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More