Necesito Programar Más

    @bibliotheca-dao/postcss-100vh-fix

    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]: https://caniuse.com/#feat=viewport-units [iOS’s bug]: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ [PostCSS]: https://github.com/postcss/postcss

    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.

    Install

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

    DownloadsWeekly Downloads

    55

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    6.72 kB

    Total Files

    7

    Last publish

    Collaborators

    • redbeardeth