100vh
Fix
PostCSS 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.
/* Avoid Chrome to see Safari hack */@) }
It works with min-height
and max-height
too.
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:
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.