Use these instead of vh

I see people use `vh` a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we have, which are `dvh`, `svh`, and `lvh`. Along with these, you could also use `dvb`, `svb`, and `lvb`, which are the logical property version of the height units, but for the block-size.

🔗 Links

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[fersahahmet]

You are King of CSS not necessarily because you know everything but a very deep understanding of what you are talking about which i personally love and admire the most about you. Thank you Kevin for every single effort of you

[arjunjayakumar]

The timing. I was fixing a layout and was experimenting with dvh. Will surely try out svh as well. Thanks Kevin

[TomasMisura]

As a casual web developer, it's challenging to keep up with all the changes and recommendations, so I'm grateful that someone like you is undertaking this and providing us with all that information.

[Dexterx]

Just when I got to use the vh properly, lol

[EvgenyOrekhov]

Even better: use dvb/svb/lvb.
These are called "logical units", and they will respect the writing mode.
"b" stands for "block", which is the dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes.

[houssembenothmen]

svh is not just better
u have to do it as for the performance tests you will always find the CLS (cumulative layout shift) and definetly the dvh may cause problem there in tests

[Glittery_Magic]

I normally ALWAYS have questions when learning. You cover all the nuances so well I have no questions only full clarity. Excellent Ive subscribed.

[bossaddict]

You know what, your content is a step above most other channels regardless of content type. Keep doing what you do please. I think you're excellent.

[Hataken]

The timing couldn't be more perfect. I was creating a "Coming Soon" page and when I was working on the mobile version, the footer and hamburger menu sidebar were overflowing with 100vh. I was stuck trying to find a solution, but then I came up with a dynamic vh solution using JavaScript, and it worked really well (even though it took me almost 3 hours to figure it out).

And now you post a video, showing me a super simple way to fix it 😂😂

[deliriumcode]

Believed or not - one of your most powerful videos. Short and sorts a years of problems. :)

[jaimemartin]

I just started using dvh to avoid some issues, and now I discover that svh is even better. Thanks.

[gabydewilde]

Welcome to another episode of new units to work around issues with old units but have issues of their own. Of course you could also use: bottom but I get that that isn't the point of the exercise.

We kinda needed a new way to make pages jump up and down now that most of the old methods have been fixed.

[hariskhan]

Amazing Man... I just had an issue and from 100vh went to 95vh for Mobile view, but now I think I'll use svh for mobile view !

[kopilkaiser]

You are the best tutor in teaching CSS. The one reason being you explain in detail and help to understand better the properties and their use cases :D

[worthsalive]

I think applying transition on the Hight property will take care of the jumps in with dvh. It will be cool if the jump is rather a smooth stretch.

[truthteachers]

Love all the short hints and help from you, bro. Shor, simple nd extremely helpful. Keep them coming. I try to give back something whenever i can.

[ManishBajagai]

Luckily and accidentally i used svh through vs code suggestions, and it fixed the issue i had with the vh in mobile screens. I didn't really knew what svh was back then but i was super pumped up to see that it worked like a charm

[awhite]

Useful! Looks like I’ll be switching my vh to svh from now on. Thanks

[andreasorourke]

I'm getting into freelance development and your channel is super helpful!

[Wynorrific]

Great content, you helped me learn HTML, CSS and, SCSS. I'm now learning JavaScript. Have a blessing day.