2.1.2 • Published 1 year ago
inner-vh v2.1.2
Inner vh
Browser UI aware vh. Utility exposing JavaScript innerHeight
to CSS.
Note
Consider pure CSS solution using units
lvh
,svh
anddvh
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);
}
2.1.2
1 year ago
2.1.1
3 years ago
2.1.0
3 years ago
2.0.0
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.0
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.1
5 years ago