Use these instead of vh
Вставка
- Опубліковано 15 лис 2023
- Looking to step up your CSS game? 👉 kevinpowell.co/courses?... I have a bunch of courses, including several free ones.
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/viewp...
✅ Up to date browser support: caniuse.com/mdn-css_types_len...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / 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 UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / 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 awesome!
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
ditto!
Just when I got to use the vh properly, lol
Me with big brain using 100%
I have the same situation haha
The guy is a developer - streamer, not the CSS god who is commanding you something. If 100vh that’s working for you and you do it right, keep it up.
Well its the same thing anyways
😂
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.
I normally ALWAYS have questions when learning. You cover all the nuances so well I have no questions only full clarity. Excellent Ive subscribed.
The timing. I was fixing a layout and was experimenting with dvh. Will surely try out svh as well. Thanks Kevin
Same here 😅
How did it go?
How did it go?
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 😂😂
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.
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.
Thanks
It's just a different use case, I assume? The video describes a situation when you need an element with 100% height of viewport.
why would you want any element to be 100% height with horizontal writing mode but 100% width when it’s vertical. isn’t that what respecting the writing mode would do?
Thank you, I have dealt with the vh problem quite a bit, and didn't know about the new dimensions.
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 !
Thanks Kevin. I had this exact problem and I just skipped it, because I couldn't find the perfect solution. Now this video showed up to me and it's so easy :)
I just started using dvh to avoid some issues, and now I discover that svh is even better. Thanks.
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.
Useful! Looks like I’ll be switching my vh to svh from now on. Thanks
Great content, you helped me learn HTML, CSS and, SCSS. I'm now learning JavaScript. Have a blessing day.
Life saving. I was having headache with it. Thank you soooooo much❤
I'm getting into freelance development and your channel is super helpful!
Oh ya! Did I struggle with this a while ago till I found those units. Thanks for the reminder.
I love your videos, Kevin! You're my goto when I want to learn new things about CSS.
I had no idea about vh, never mind dvh, svh, lvh. Very clear explanations and demo!
I would subscribe, except I'm already subscribed :)
Believed or not - one of your most powerful videos. Short and sorts a years of problems. :)
Great video, as always - and by the way, nice shirt!
I have been using dvh and didn't realize that it was causing the layout shift, I guess I will be using svh instead. Thanks for the video.
After you mentioned this svh in an earlier video, i've been in love with it ever since. It's now a staple in all my projects 👍
This is awesome!!! Way better than using calc(100vh - computed height of UI element ). Thanks ))
very useful info, thank you Kevin
I've just tested this out in my current project... Indeed, for most things, svh seems to work better on mobile than dvh. The one exception is for my background overlay effect, which covers the mobile viewport more accurately when set to dvh.
Thanks for sharing. Im new to your channel and really enjoy your teaching style.
Thanks for the easy to understand explanation. I used to think these concepts would just be out of reach for me. 🎉 I struggle a bit with html and css. I think it is because I started with winforms and then later xaml.
Awesome Explanation! Loved It...
omg, someone who actually taught me something i didn't know, thanks kev!
I used dvh in one of my projects, it was my first time using it, when i saw the scrolling in mobile i had no idea what was happening, took me some time to discover the issue was being caused by this dynamic heights, and yeah, svh solved the issue
God such great content I need to support you like yesterday.
This is awesome! Solves mobile browser UI overlaps
This is BRILLIANT. Thank you!
Thank you for your Videos
When I saw the thumbnail, I thought this is absolutely clickbait. What could be better then vh? But this is really great!
As usual, excellent info.. By the way, nice shirt.
Great content and a big plus for the Star Wars + the 'too many' tabs in Chrome.😁
Recently dvh was useful to me for a fixed collapsed menu on mobile. There is no layout shift there because the element is a fixed menu and when I was using vh, bottom of the menu would get cut off in certain cases because of browser UI pushing it down. Using dvh it worked in all cases as I wanted it so that was nice.
you help us so much Powell ........wish i had financial means to support you☺☺☺
I tried to use 100dvh, but my clients don't like to see layout jump when scrolling the page. I will try to use 100svh :)
Nice video!
Thanks man. This was helpful.
Anyway Everyone can do they own way of CSS - The Dev Tool is way to test and see what's new and what values and units are included and supported by your Browser Inspect Tool. Especially for CSS - when you type your new or select class or id hit the Tab and you will see all available values for the CSS attribute you want to edit, change or check.
For me this is useful in media queries since you've mentioned that vh doesn't have problem on desktops but only on mobile view
Apparently it's already supported more than 98% by now. Really comes in handy to know about it right now. Working on my first mobile application.
My No.1 channel for CSS content!
Mr KP! Awesome, always.
Really usefull rules, thank you for informing about these new features of CSS
good one. i didn't even know this existed. no time to catchup. thanks for this!
Interesting useful information about css. Thanks a lot.
Omg having troubles with this kind of problem THANK YOU BIG SO VERY MUCH!!
We having that CSS convo , About that time!
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.
Not really, these units were just not necessary before mobiles started having a dynamic height.
Will certainly try this out. Have been using 95vh or so for mobile to fix this, but it's a bit unpredictable.
I'm building websites with different sections that need to be as tall as the viewport and there are a lot of scroll-based animations. Whenever there is a layout shift it can get pretty laggy because the libraries need to recalculate everything to the new scroll position. I've tried some approaches, but I found that using 100lvh is interesting because the section will always cover the viewport and, with the animations, all the extra height at the bottom of the section is barely noticeable. Anyone have a better alternative?
Not sure what you are doing and what you need, but if you want to make full page containers and stick to that even on resize, you can simply just use something anchor like to see what anchor is next to you and scroll to it. Use windows resize and awrtimeout + cleartimeout method to actually delay it to not constantly recalculate on resizing. Make the delay to something like 100ms and then get your current position. Iterate through your predefined anchors and request their position. If you notice being between two anchors you can define a percentage breaking point when to the scroll up or down.
You can use the values here but they will change instantly. If you want a certain amount of delay or only resize them after window resizing finished, use css variables and fill them by js on windows resize, use settimeout and cleartimeout to add a delay. With var(--var, 100vh) you can also let it work initially and it will be resized very shortly after loading. If you want to reduce the time cause your application takes a moment when loading, you can use cookies to store the value. So when you load site you can check if there this cookie, access it and actually use that as the initial value as well.
But if you application is that slow, maybe optimizing it is better than adding another workaround.
@KevinPowell, in case you are short of ideas for new videos, I would like to understand how you manage the Cumulative Layout Shift (CLS) issues that occur by adding to the page some dynamic elements, fonts, s, etc.
If you are talking about dynamic elements that are loading when the page loads, you could use skeleton loaders like UA-cam does to make up for the space they will take once they fully show up. :)
muy bueno gracias, yo luché con eso, cambiando por js el 100vh por min-height
Thanks man you saved my day.
Great content like always
Thanks for the explanation 👍
I like to use an outer element with 100vh to prevent page to shift height, and then use an inner element with 100dvh to adjust the for objects placement in the wiewport.
WOW, VERY GOOD! I needed that already years ago! Thank you! Is there some way how to affect FONT SIZE (e.g. much LARGER FONTS on much smaller devices?), or on portrait vs landscape?
Thanks for addressing my question!
Useful info, thanks
Wow I didn't know or realize there was others besides dvh I thought it was only dvh and vh thanks :)
You've fixed my life. Thanks a lot.
In other words, mobile phone developers are screwing us.
yas that happened to me
Love your sweatshirt and the video, of course!
I would love to see more videos of javascript from your contents... I love your teachings.
great video man, thanks
I'm definitely going to be using lvh for one thing: full-page background images. With vh or dvh they'll get resized, which isn't a desirable side effect of scrolling. With lvh the image will always stay the same size.
omg, an actually useful video! thanks!
Please sir thanks for the wonderful explanation but between (dvh, svh, lvh) which one is more better to use?
Oh ,thank you so much .. i was suffering from this problem❤
You are a miracle, i just ran in this problem
Thanks! nice tips!
Wow, this is perhaps *the* most helpful video I've seen on CSS. I'm currently building a UI for my university and the vh was an annoying issue. I'd resorted to something like calc(100vh - 170px) for the height, but I can see that svh is much better. Thank you!
you could have used javascript. by setting your div height equals to -- window.innerHeight+"px" --
Hey Kevin, thank you so much for breaking down these elements.
Question: Is there a way for the browser to take into account the virtual keyboard? For example, if you have a login element (or a login / modal) to adjust the size of the element when the keyboard is being shown?
Could you please let me know if you find the answer for this? have the same issue. Thanks.
Use a lib for that. There are a couple to find. It's actually a nasty thing that you cannot solve that casually. Most often they work in a certain way: listen to windows resize and check if your focus right now is in an input field. Use css variables, settimeout and cleartimeout functions for smoother transitions.
Best CSS teacher.
Great as always
I use js.I set the page height variable globally and use it.I am not quite used to using these units yet.But thanks for the video anyway👌
Kevin, I have a question for you, will this fallback work if I use it inside calc function? Or for this purpose I have to use @supports directive and inside of it use my calc?
Fallbacks works if your input is invalid. As long it is invalid it uses the previous value. Actually I am not sure why you are even asking this. You can test your question in a few seconds...
the best explanation!
I was suffocating but after adding dvh instead of vh it works and love from my heart
He is just like a gold mine but for CSS stuff! Great videos!
i love you Kevin Powell you are great
New suscriber, this video or the tittle in this one catch my attention . And Later Here you are! Great content
Are there any tools (extensions or even browsers) that will add dynamic elements similar to how navbars work on mobile browsers? It'd be really nice to have some extension that will simulate these behaviors even when in desktop resolutions.
Still prefer the JS route personally, All the advantages of SVH plus you can animate if needed, update on scroll or not. But glad there is more support for this issue. So many years of hacks and work arounds!
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
Nice! And what do you thimk about using 100% insted?
love how they made it super trivial to solve a problem that was super annoying to handle
I wish dvh had been created the way I proposed it (which even had scrollbars logic built-in) and not the downgraded version they ended up implementing.
I also had specified that unless battery saving options were active, the adaptation should be animated. I guess the "should" was taken with it's permissibility of "not".
Downgrade being: It doesn't take scrollbars into account while in my specification, it must and I even specified the algorithm...
Thank you man!
That’s nice but it’s always worth asking: is it ready for the production?
I checked caniuse, so looks like there is only one known issue, the major one though:
Safari 15.6 on macOS has an issue where dvh is larger than expected (242758).
OMG thank you. been trying to find hacks around this for years
thank you Kevin
Fun Fact : the :D sign or emoji (in the chrome toolbar) instead of numbers it mean like there is already more than 99+ tab opened
funny that Kevin too have the habit of not closing tabs XD..........sometimes i make it change to this emoji ;) if in incognito but i don't know the number