###### tags: `web` `study` # Set adjustable view hight We can use the :root selector, which matches the root element of the document, with document.querySelector() in the following way to get the root element: ``` console.log(document.querySelector(':root')); ``` 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`); ``` An example usage in reactjs - public/index.html ``` <html lang="en"> ... <body> ... <div id="root"></div> ... </body> <script> function initAdjustViewHeight() { document.querySelector(":root").style.setProperty("--vh", window.innerHeight / 100 + "px"); } initAdjustViewHeight(); </script> </html> ``` - src/sass/home.sass ``` .home ... height: calc(100 * var(--vh)) width: 100vw ```