CSS Viewport height is complicated
CSS Viewport height is complicated.
Summary:
lvh: Largest viewport height (when browser UI is hidden)
svh: Smallest viewport height (when browser UI is visible)
dvh: Dynamically changes when browser UI is shown
Image via @argyleink
What about plain vh? Avoid it. Its meaning is unclear (lvh, svh, and dvh were created to avoid vh's ambiguity). vh typically works the same as lvh today, but it’s unreliable since it can represent large, small, or some intermediary size: https://github.com/w3c/csswg-drafts/issues/6454#issuecomment-880808709
Here’s a solid post by @frehner that explores this issue in detail: https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4
Note: These viewport units are a new feature. They’re implemented in Safari and Firefox, and coming to Chrome soon.
https://caniuse.com/?search=lvh