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.

Demo

If you liked this post, you might like these ones, too

  1. What are design tokens?

    Design tokens are just spicy variables, right? Wrong! They are an extremely versatile way of sharing design properties and in this tutorial, you’ll learn how they work.

    Continue
  2. Build a dashboard with CUBE CSS

    An in-depth guide to going from HTML all the way to a full styled banking dashboard, using the CUBE CSS methodology

    Continue
  3. Limit line lengths to increase readability

    🔥 A handy quick tip.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.