inner-vh
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

Inner vh

Browser UI aware vh. Utility exposing JavaScript innerHeight to CSS.

Note

Consider pure CSS solution using units lvh, svh and dvh instead. Read more.

Pure CSS example

body {
	min-height: 100vh; /* Fallback for very old browsers */
	min-height: 100dvh;
}

Demo

Try this in Google Chrome/Firefox on Android or Safari on iOS.

Demo

Installation

npm install inner-vh

Usage

Basic Example

JavaScript

import { innerVh } from 'inner-vh'

innerVh()

CSS

body {
	min-height: 100vh; /* Fallback for very old browsers */
	min-height: calc(var(--innerVh, 1vh) * 100);
}


Advanced Example

JavaScript

import { innerVh } from 'inner-vh'

innerVh({
	customPropertyName: 'rawInnerVh',
	onChangeCallback: (innerVhInPx) => console.log(`innerVh = ${innerVhInPx}px`),
	root: document.documentElement, // Custom property --rawInnerVh will be applied to this element
	ignoreCollapsibleUi: true, // Custom property won't be updated if mobile url bar collapses or expands
	maximumCollapsibleUiHeight: 100, // Height of collapsible ui in pixels. Smaller number reduces false positives.
})

CSS

:root {
	--innerHeight: calc(var(--rawInnerVh, 1vh) * 100); /* Fallbacks to 100vh */
}

body {
	min-height: var(--innerHeight);
}

/inner-vh/

    Package Sidebar

    Install

    npm i inner-vh

    Weekly Downloads

    21

    Version

    2.1.2

    License

    ISC

    Unpacked Size

    36.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • onset