Cacher is the code snippet organizer for pro developers

// 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 listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

.screen {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

setScreenFullVH() {
      const el = document.querySelector('.full-vh')

      if (!el) return

      function setVH() {
         // get & set header height
         const headerHeight = document.querySelector('.js-header').offsetHeight
         document.documentElement.style.setProperty(
            '--headerHeight',
            `${headerHeight}px`
         )

         // 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`)
      }

      if (iOS) {
         // iOS fix
         requestAnimationFrame(() => setVH())
      } else {
         setVH()
      }
   }