100vh height when address bar is shown - Chrome Mobile

问题

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.

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

When I scroll down, it looks like this:

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?

回答1:

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.

回答2:

Try using min-height: -webkit-fill-available. You can also add it below height: 100vh as a fallback.

回答3:

you can fix the address bar issue with setting height: 100% on html and body tag and off course set margin and padding of body to zero and also you can handle scrolling in your main div for better controll

回答4:

I found a nice solution...

.page-header {
  @supports (-webkit-appearance:none) {
    .os-android & {
      min-height: calc(100vh - 56px);
    }
  }
}

Taken from here

回答5:

...so what about this way?

html,
body {
  width: 100vw;
  height: 100vh;
}
@media (max-width: 480px) {
  html,
  body {
    height: calc(100vh - 56px);
  }
}

来源：https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile

标签

html

css

google-chrome

address-bar

mobile-chrome