svh/lvh/dvh dynamic viewport heights and intrinsic keywords explained. This family contains 11 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
h-svh | height: 100svh; |
h-lvh | height: 100lvh; |
h-dvh | height: 100dvh; |
max-h-svh | max-height: 100svh; |
max-h-lvh | max-height: 100lvh; |
max-h-dvh | max-height: 100dvh; |
min-h-svh | min-height: 100svh; |
min-h-lvh | min-height: 100lvh; |
min-h-dvh | min-height: 100dvh; |
w-svw | width: 100svw; |
w-dvw | width: 100dvw; |
Example#
example
<section class="min-h-dvh">Ignores mobile browser chrome jumps</section>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- dvh tracks the dynamic (collapsed-chrome) viewport — best for mobile heroes
Related#
utilities/layout/aspect-ratio|Aspect ratio · utilities/spacing/spacing-scale|Spacing scale