Skip to content

FilipChalupa/inner-vh

Repository files navigation

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);
}