🧶 Tags - #HTML_CSS

Resource - https://courses.kevinpowell.co/conquering-responsive-layouts

🔗 Links -

The Problem with View Points

2023-08-26 - 22:47

DVH

A good alternative for vh is dvh which is dynamic view-port height. This can cause it's own issues as it will try to re-adjust when the height is less than, foe example 100vh, and try to adjust it back to 100vh when you scroll.

SVH

svh is a small view-port height, that means that it'll try to assume that other elements will always be in view so, it will always be a bit smaller and will cover the rest of the space. So once you scroll and the other element disappears, we won't be at 100vh height anymore, but it is still better than dvh as it won't move around when scrolling.

Browser support for svh is still not there on all of these. So it's good to have both vh and svh in the css.

height: 100vh;
height: 100svh;
position: relative;