Refer to https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4
he lvh, svh, and dvh units in CSS are used to specify heights relative to the viewport height. Here's a brief summary of when to use each unit:
-
lvh (logical viewport height): Use this unit when you want an element to take up a percentage of the viewport height, but you want that percentage to be based on the height of the element's containing block, rather than the height of the viewport itself.
-
svh (superview height): Use this unit when you want an element to take up a percentage of the height of its nearest ancestor with a position of "fixed", "absolute", or "sticky".
-
dvh (document viewport height): Use this unit when you want an element to take up a percentage of the viewport height, but you want that percentage to be based on the height of the document, rather than the height of the viewport itself.
In general, you'll probably use vh and vw units more often than these more specialized units, but they can be useful in certain situations where you need more precise control over element heights.