CSS Custom Properties
.my-section {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
OK, that sets us up. Now let’s get the inner height of the viewport in JavaScript:
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
We told JavaScript to grab the height of the viewport and then drilled it down into 1/100th of that total so we have a value to assign as our viewport height unit value. Then we politely asked JS to create the CSS variable (–vh) at the :root.
As a result, we can now use –vh as our height value like we would any other vh unit, multiply it by 100 and we have the full height we want.
