🔺Full Screen Height🔺

A small javascript plugin for fix 100vh problem on mobile screens

⚙ Installation

Using package managers

Install full-screen-height package:

• npm install full-screen-height

Import script, styles and initialize:

import fullScreenHeight from 'full-screen-height/dist/fullScreenHeight';
import 'full-screen-height/dist/fullScreenHeight.css';
// ..
fullScreenHeight();

🤔 How to use it?

1. Initialize in your main.js file:

fullScreenHeight();

2. Set css class:

For height:

  <div class="h-full-screen"></div>

For min-height:

  <div class="min-h-full-screen"></div>

For max-height:

  <div class="max-h-full-screen"></div>

Or if you need to subtract some amount from the full height of the page, use this:

.your-element {
    height: calc(var(--doc-height) - `value`px)
    // ..
}