filipchalupa / inner-vh

Demo: https://filipchalupa.cz/inner-vh/demo.html

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.

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's Issues

[Bug] ignoreCollapsibleUi does not work

Thanks for useful package.

The option ignoreCollapsibleUi is not working.
I'd be grateful if you could sort this issue.

Thanks in advance.