100vh vh

1// CSS
2.full-height {
3  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
4  height: calc(var(--vh, 1vh) * 100);
5}
6
7
8// JS
9const injectVHInCSS = ()=>{
10  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
11  let vh = window.innerHeight * 0.01;
12  // Then we set the value in the --vh custom property to the root of the document
13  document.documentElement.style.setProperty('--vh', `${vh}px`);
14}
15
16// Run it on load
17injectVHInCSS();
18// Run it on resize
19window.addEventListener('resize', injectVHInCSS);
20
21