A safer way to vertically fill the viewport

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.

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 to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.