Chrome for iOS与<style>height: 100vh;</style>

Question

Chrome for iOS hides its address bar when the user scrolls up. This feature does not work well with 100vh (or any vh unit) because as the toolbar shrinks, the viewport height changes and thus the size of the element changes. I have a cover image with 100vh and it causes a very noticeable jitter as the length of the entire page grows or shrinks.

The problem exists for any height set with vh , I think.

I can (and probably will) resort to javascript to set my cover image height, but I'd prefer to use vh .

Any clever ideas?

Answer 1

I'd recommend using 100% instead of 100vh - you can add this...

body{
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
}

From there, any element without another wrapper that has its own height will be able to fill the full screen just using width and height at 100%. Example below!

https://codepen.io/will0220/pen/KXqoGZ