Menu
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 address bar disappears. So far, so good, let's make an example:
The container's 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 bar's 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?
426
Yes, 100vh is 100% of a viewport height (your device), when pure 100% only fill all available parent area (parent block can have e.g. 50px height and it will fill only to this parent height).
The state-of-the-art way Sure! Applying min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
Min height 100vh means the element should occupy the web browser viewport height. This is always 100 percent of the web browser's viewport height. If there is more content, the element will stretch more than the viewport's height, which is a code example that will clear things up.
You can use the window. innerHeight property to get the viewport height, and the window. innerWidth to get its width. let viewportHeight = window.
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.
135
Try using min-height: -webkit-fill-available. You can also add it below height: 100vh as a fallback.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
