A full-height section sized with 100vh
- Forbidden
min-height: 100vhon a hero, a sign-in screen or an app shell- Instead
min-height: 100svh. Usedvhonly for an element that must follow the browser bars as they show and hide. If older browsers matter, keep100vhas the line before it, as a fallback.
What this rule looks like
Why this rule
On a phone, 100vh is the height with the browser's bars hidden. While they are showing — which is when the page first loads — the bottom of a "full-height" section is under the toolbar, and the call to action placed at its foot is exactly what cannot be seen. svh is the default because it does not change: dvh resizes as the bars move, which makes the content jump while the reader scrolls.
- Kind
- Rule
- Section
- Things to avoid
- Group
- Spacing and layout
- Bucket
- mechanical
- Severity
- warning
- Detector
viewport-height- Since
- v0.10.0