Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time
Jul 23, 2020
Jul 23, 2020
Jul 23, 2020
Jul 23, 2020
Jul 23, 2020

PostCSS 100vh Fix

[PostCSS] plugin to fix [iOS’s bug] with 100vh.

It works in Chrome (just -webkit-fill-available causes problems in Chrome in some cases), iOS/iPad/MacOS Safari and [all other browsers]. Pure CSS solution, no JS required.

body {
  /* Footer will be hidden on iOS Safari because of bottom panel */
  height: 100vh;
body {
  height: 100vh;

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;

100vh bug illusration Max Schmitt

It works with min-height and max-height too. [all other browsers]: [iOS’s bug]: [PostCSS]:

Sponsored by Evil Martians


Pure CSS solution is limited. For many cases you need to use JS-based hack like postcss-viewport-height-correction:

Our hack do not work with partial height like height: 90vh or height: calc(100vh - 60px).

Also, we do not fix Chrome for Android bug:

100vh Chrome bug illusration David Chanin


Step 1: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.

Step 2: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-100vh-fix'),

Step 3: Use height: 100vh or min-height: 100vh in your CSS.


PostCSS plugin to fix height/min-height: 100vh on iOS



You can’t perform that action at this time.