Kevin Powell - Community•2y ago

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

hey folks I'm using these two different methods to get the full viewport height I dont know why these are giving two different values 1st Method by pure css

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

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

computed value of height for above method is 664px 2nd method by javascript and css

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

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

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

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

computed of height value for the above method is 641px

3 Replies

Jochem•2y ago

100vh is something to be very careful of https://youtu.be/veEqYQlfNx8

Kevin Powell

YouTube

The problems with viewport units

Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts Join the Discord: https://kevinpowell.co/discord Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...

Jochem•2y ago

as for what you're doing with the calc thing, I have no idea. What is the value of window.innerHeight?

phyrasaur•2y ago

I would suggest to use document.documentElement.clientHeight so that you won't take the unnecessary height of a horizontal scrollbar: https://javascript.info/size-and-scroll-window There are discrepancies about what vh supposed to mean especially in browsers that have a hidey address bar. That's why we have newer dynamic viewport units like svh, lvh and dvh https://web.dev/viewport-units/

Window sizes and scrolling

web.dev

The large, small, and dynamic viewport units

New CSS units that account for mobile viewports with dynamic toolbars.

Gaming

Programming

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