getting two different value for the full viewport height using css and javascript

.root {
    display: flex;
    height: 100vh;
}

const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`

.root {
    display: flex;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);