Real time REAL viewport height - mobile toolbars included

RealViewportDimensions.md

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