DEV Community

Discussion on: CSS gotcha: How to fill page with a div?

Collapse
mpuckett profile image
Michael Puckett

Yeah unfortunately the vh unit is almost useless on iOS Safari. I believe the trick is to use height: 100% on html element and then pass that down to the body and any container with flex or grid.

developers.google.com/web/updates/...

Collapse
angelsixuk profile image
Luke Malpass

Yes that only works on items at the top for heros. It doesn't allow you to use it mid-page.

It's a well konwn issue. I solved it just using JavaScript on load to set the height and add data-vh="100" where you can pass in a percentage of the view height then it sets it to pixels after load. I will enhance it to detect resizing from address bar hiding (perhaps if resize happens at same time as scroll) vs normal resizing and sort it that way.

Collapse
lennythedev profile image
Lenmor Ld Author

Thanks for the heads up. I didn't get a chance to try this yet on iOS or Safari. I'll test it out and add it to the article