100vh height when address bar is shown - Chrome Mobile
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.
Try using min-height: -webkit-fill-available
. You can also add it below height: 100vh
as a fallback.
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