Javascript code to set a CSS var --real-vh
with the real value in px.
It updates when the browser gets resized.
function realVH() {
document.documentElement.style.setProperty('--real-vh', (window.innerHeight) + "px")
}
realVH()
window.addEventListener("resize", event => realVH())
CSS code:
body {
/* you can do whatever you want with it, like use it inside calc(), etc. */
/* 100vh is a fallback value */
height: var(--real-vh, 100vh)
}