A safer way to vertically fill the viewport

Categories

Using min-height: 100vh works great for filling the viewport, but a safer way is to progressively use -webkit-fill-available to account for a long-standing iOS issue with 100vh.

Code language
CSS
html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

This is by no means a perfect fix, but it’s a little more acceptable if you need docked elements on your page.

For more info on the iOS issue, be sure to check out Nicolas Hoizey’s extremely detailed log. See this handy demo, too.

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.