CSS Viewport Height Units

In CSS, vh (viewport height) and its variants (lvh, svh, dvh) are units used to specify sizes relative to the viewport's height. Here's what each of them means:

vh (Viewport Height)

• 1vh is equal to 1% of the viewport's height.
• Example: height: 100vh; makes an element as tall as the entire viewport.
• Issue: Some browsers (especially on mobile) include the browser's address bar in the viewport height calculation, which can lead to unexpected results.

lvh (Large Viewport Height)

• lvh stands for large viewport height, representing the largest possible height of the viewport.
• Typically, it corresponds to the viewport height when the address bar is fully hidden (e.g., after scrolling down on mobile).
• Example: height: 100lvh; ensures an element uses the maximum possible viewport height.

svh (Small Viewport Height)

• svh stands for small viewport height, representing the smallest possible height of the viewport.
• Typically, it corresponds to the viewport height when the browser’s address bar is fully visible (e.g., when the page is first loaded on mobile).
• Example: height: 100svh; makes sure an element adapts to the minimum viewport height.

dvh (Dynamic Viewport Height)

• dvh stands for dynamic viewport height, which dynamically adjusts as the viewport changes (e.g., when the browser's address bar expands or collapses).
• This is the most responsive option for mobile browsers.
• Example: height: 100dvh; ensures an element resizes fluidly as the viewport height changes.