https://github.com/postcss/postcss-100vh-fix

PostCSS plugin to fix height/min-height: 100vh on iOS
https://github.com/postcss/postcss-100vh-fix

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/postcss/postcss-100vh-fix
• Owner: postcss
• License: mit
• Created: 2020-07-23T05:52:46.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-27T02:41:40.000Z (over 1 year ago)
• Last Synced: 2024-04-14T02:32:51.838Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 550 KB
• Stars: 929
• Watchers: 11
• Forks: 12
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - postcss-100vh-fix - height: 100vh on iOS | postcss | 687 | (JavaScript)

README

        
# 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.

```css

body {

  /* Footer will be hidden on iOS Safari because of bottom panel */

  height: 100vh;

}

```

```css

body {

  height: 100vh;

}

/* Avoid Chrome to see Safari hack */

@supports (-webkit-touch-callout: none) {

  body {

    /* The hack for Safari */

    height: -webkit-fill-available;

  }

}

```



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



  



## 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:



[`postcss-viewport-height-correction`]: https://github.com/Faisal-Manzer/postcss-viewport-height-correction

## Usage

**Step 1:** Install plugin:

```sh

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][PostCSS]

and set this plugin in settings.

**Step 3:** Add the plugin to plugins list:

```diff

module.exports = {

  plugins: [

+   require('postcss-100vh-fix'),

    require('autoprefixer')

  ]

}

```

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