You must have used View Port units (vh, vw) in CSS, but do you know how this View Port works and why is there annoying scroll if you use 100vh?
Basics of view port
vw = 1%of the width of the viewport size.vh = 1%of the height of the viewport size.
If we use 100vw and 100vh, it will cover the entire document.
This can work fine in desktops, but in mobiles (or desktop sites with navbars), where we have dynamic headers and status bars. Our content will overflow out of the actual viewport, resulting in a scroll state.
To overcome this issue, new view port units were introduced, i.e. small view port and large view port
Small Viewport
Small view port assumes that dynamic status bars are open, i.e. default state of browser when you visit a website without scrolling.
Units representing the small viewport have the sv prefix. The units are svw, svh, svi, svb, svmin, and svmax
Large Viewport
Large view port assumes that dynamic status bar are not open i.e. scrolled state.
Units representing the large viewport have the lv prefix. The units are lvw, lvh, lvi, lvb, lvmin, and lvmax
Dynamic view port
In addition to the large and small viewports, there‘s also a dynamic viewport that has dynamic consideration of the UI
- When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport.
- When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.
Its accompanied units have the dv prefix: dvw, dvh, dvi, dvb, dvmin, and dvmax. Their sizes are clamped between their lv* and sv* counterparts.
Conclusion
Using 100vh for full-height layouts can lead to unwanted scrolling when browser UI elements (like address bars or status bars) dynamically show or hide. The new viewport unit families—small viewport (sv*), large viewport (lv*), and especially the dynamic viewport (dv*)—give you precise control over sizing in both static and interactive browser states. For most modern responsive designs, switch from vh to dvh (dynamic viewport height) to ensure your content always fits exactly without overflow or scroll artifacts, regardless of whether the user has scrolled or the browser UI is visible.