Understanding the different CSS viewport units (dvh, svh, lvh)
Tags: webdev, beginners, css
Published: 2024-05-26 08:23:25

## Background
While working on my current project, I received a request from the client mentioning the masthead is too tall which ended up covering the content when user is viewing the pages on shorter screens.
This is an important concern as it affects accessibility for all users so we got to work on it immediately (by that I meant adding the ticket to the next sprint)!

So I changed the height of the masthead component from the original implementation of 2/3 of viewport's height to 50% of viewport's height:

```
// Old implementation
height: 66.7%;
// New implementation
height: 50vh;
```
However, when I did this change and checked it on my localhost on
both desktop and mobile view, it did not resemble 50% of the screen height. Instead, it seemed closer to 60% of viewport's height. So I decided to investigate more into this issue, and alas, I came across an article about _dynamic viewport height_. 
After reading the article, I had a much better understanding on why the masthead was not appearing as I had thought it should. 

## Solution 1
For regular viewport height, `100vh` would meant from the bottom of the top toolbar to the bottom of the screen while a dynamic viewport height at `100dvh` would mean the height of the content viewable not being blocked by the top and bottom toolbars as depicted in this referenced image below.

[![Comparison between 100vh and 100dvh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns5er4iiwz5oya1l4i8t.png)](https://university.webflow.com/lesson/small-large-and-dynamic-viewport-units?topics=layout-design)

So I immediately went to test it out and indeed, the masthead image now appeared smaller than when i used `50vh`. However, to my horror, as I scrolled down the page, the masthead jumped. I found that this is due to the toolbar minimizing as the user scrolls down on the browser and since I'm using dynamic viewport height units, the viewable content height changes as the user scrolls. Hence, causing this unusual effect. So, I decided to explore the other viewport units.

On Safari browser, the image jumps to it's new height after scrolling as the bottom toolbar hides:
![Jumping effect on Safari](https://res.cloudinary.com/dliemowfd/image/upload/v1716399673/dvh_safari_5_vlcsw5.gif)

On Chrome browser, the image stretches to it's new height when scrolled as the bottom toolbar hides:
![Stretching effect on Chrome](https://res.cloudinary.com/dliemowfd/image/upload/v1716401376/dvh_chrome_2_c0kaoz.gif)

## Solution 2
There are several viewport height units available to use:

- `dvh`: Dynamic Viewport Height
- `svh`: Small Viewport Heigh
- `lvh`: Large Viewport Height
- `vh`: Viewport Height

These are also true for viewport width!
With `svh`, it refers to the bottom of top toolbar to the top of the bottom toolbar while `lvh` refers to the top of the top toolbar to the bottom of the bottom toolbar.

[![Comparison between 100svh, 100lvh and 100dvh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osrdsgbdkf0qbjttguvv.png)](https://www.linkedin.com/pulse/understanding-dvh-lvh-svh-css-prabhath-senadheera-wmvkc/)

With this newfound understanding, I decided to go with `svh` and indeed, the jumping bug no longer exists since `svh` remains consistent and the client is also satisfied with this height improvement! 

## Conclusion
In the end, deciding which viewport units to use ultimately depends on your requirements but do be careful when using `dvh` if you have any height dependent elements on your page. 

This purpose of this post is to document my thought process while resolving a bug and also the research put into it. Since this is also my first post, I would love to know any feedback and points that I can improve on, thank you!