• CSS fix for 100vh in Mobile WebKit
  • By Matt Smith
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: z0gSh1u
  • Proofreader: LHD951220, GESJ-Yean

Mobile WebKit kernel browser 100vH problem CSS repair method

Not so long ago, someone was talking about how WebKit handled 100Vh CSS, essentially ignoring the bottom edge of the browser viewport. While some people recommend avoiding 100Vh, others have a few different alternatives to work around the problem. In fact, the problem can be traced back to a bug Nicolas Hoizey submitted to WebKit on the subject a few years ago (to recap: WebKit says the treatment was intentional 🧐).

The other day I was working on a basic Flex layout – header, main and sticky footer – that we see and use all the time:

<header>HEADER GOES HERE</header>
<main>MAIN GOES HERE</main>
<footer>FOOTER GOES HERE</footer>
Copy the code
body {
  display: flex; 
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

main {
  flex: 1;
}
Copy the code

I started doing some browser testing on my iPhone and that’s when I noticed that sticky Footer didn’t land at the bottom of the viewport as expected:

Footer is hidden behind Safari’s menu bar. This is the so-called 100vh bug (or feature?) Nicolas originally discovered and reported. . I did a bit of research – hopefully a less hack solution by now – and then, I came up with my solution (which, by the way, is all hack) :

Use – its – fill – the available

– The idea behind webkit-fill-available — at least a little — is to allow an element to fit inherently into a particular layout, that is, fill as much space as is available. Currently, such eigenvalues are not fully supported by the CSS working group.

However, the above problem is specific to the WebKit kernel, which happens to support -webkit-fill-available. So with this in mind, I added it to the 100vh rule set so that other browsers can have fallback options.

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

Copy the code

Note: The code snippet above updates the part where you add -webkit-fill-available to the HTML element, because I’ve learned that Chrome is updating its behavior in order to be consistent with Firefox’s implementation.

Sticky Footer is now in the right place in Mobile Safari!

Does it really work?

There’s a lot of debate about this. All the tests I’ve done have been fine, and I’ve now applied this method in a production environment. But I also received a lot of feedback on my tweets pointing out the problems that might arise with using this method (the effect of rotating the device, Chrome sometimes ignoring this property, etc.).

– Will webkit-fill-available be useful in all scenarios? Probably not, because frankly: This is Web development, and it’s pretty hard to do well. However, if you’re having 100vh problems with WebKit kernel browsers and are looking for a CSS-level alternative, you might want to try this approach.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.