Responsive 1vh css variable

_var.scss

// ...

:root {
  --vh: 1vh;
}

listener.js

window.addEventListener("resize", () => {
  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
  const 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`);
});

usage.css

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh) * 100);
}