Skip to content

postcss/postcss-100vh-fix

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

Sponsored by Evil Martians

Limits

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

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-100vh-fix

Step 2: 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 3: Add the plugin to plugins list:

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

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

About

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

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published