Use these instead of vh
481,255
Published 2023-11-16
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
✅ The example page: viewport-unit-test.netlify.app/
✅ The GitHub repo: github.com/kevin-powell/viewport-unit-test
✅ Up to date browser support: caniuse.com/mdn-css_types_length_viewport_percenta…
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more
All Comments (21)
-
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
-
I normally ALWAYS have questions when learning. You cover all the nuances so well I have no questions only full clarity. Excellent Ive subscribed.
-
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.
-
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.
-
The timing. I was fixing a layout and was experimenting with dvh. Will surely try out svh as well. Thanks Kevin
-
Just when I got to use the vh properly, lol
-
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.
-
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.
-
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
-
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 😂😂
-
Useful! Looks like I’ll be switching my vh to svh from now on. Thanks
-
Thank you, I have dealt with the vh problem quite a bit, and didn't know about the new dimensions.
-
Life saving. I was having headache with it. Thank you soooooo much❤
-
I love your videos, Kevin! You're my goto when I want to learn new things about CSS.
-
Oh ya! Did I struggle with this a while ago till I found those units. Thanks for the reminder.
-
very useful info, thank you Kevin
-
Believed or not - one of your most powerful videos. Short and sorts a years of problems. :)
-
This is BRILLIANT. Thank you!
-
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.
-
I'm getting into freelance development and your channel is super helpful!
