Necesito Programar Más


    1.0.3 • Public • Published

    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: 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'),

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


    npm i @bibliotheca-dao/postcss-100vh-fix

    DownloadsWeekly Downloads






    Unpacked Size

    6.72 kB

    Total Files


    Last publish


    • redbeardeth