svh in CSS: The Basics You Should Know
The svh
unit in CSS represents “small viewport height”. It’s part of the viewport-relative length units, a powerful set of tools for creating truly responsive designs that adapt to the user’s browser environment. While seemingly simple, svh
(and its related units lvh
and dvh
) address a crucial problem in web development, especially on mobile devices: the dynamic nature of the browser UI. This article will break down svh
, explaining its purpose, how it differs from other viewport units, and when (and when not) to use it.
The Problem with vh
(Viewport Height)
Before svh
and its companions, developers primarily used vh
(viewport height) for sizing elements relative to the visible browser window. 100vh
represents 100% of the viewport height, 50vh
represents 50%, and so on. This works beautifully… until you consider mobile browsers.
On mobile devices, the browser’s address bar and navigation controls (toolbars) often appear and disappear as the user scrolls. These dynamic UI elements change the actual visible viewport height. 100vh
, in these scenarios, typically represents the viewport height without the browser UI present. This leads to the infamous “100vh problem”: elements sized with 100vh
often extend beneath the browser’s bottom toolbar, making the bottom portion of the element inaccessible. The content is there, but you can’t scroll to it because the browser thinks it’s already fully visible.
Enter svh
, lvh
, and dvh
To solve this, CSS introduced three new viewport height units:
-
svh
(Small Viewport Height): This represents the smallest possible viewport height, assuming the browser’s dynamic UI elements (address bar, toolbars) are fully visible. Using100svh
guarantees that your content will always be visible, even when the address bar and toolbars are present. It’s the safest option for ensuring content doesn’t get hidden. -
lvh
(Large Viewport Height): This represents the largest possible viewport height, assuming the browser’s dynamic UI elements are fully hidden.100lvh
is essentially equivalent to the traditional100vh
in most cases. -
dvh
(Dynamic Viewport Height): This represents the current viewport height, dynamically updating as the browser’s UI elements appear and disappear. Using100dvh
means your element will resize as the user scrolls and the toolbars retract or expand.
Key Differences and When to Use Each
Here’s a table summarizing the differences and best use cases:
| Unit | Represents | Use Case |
|———|————————————————————–|——————————————————————————–|
| vh
| Viewport height (usually without UI) | Desktop designs where the viewport size is generally stable. |
| svh
| Smallest viewport height (UI visible) | Ensuring content is always visible, especially footers and bottom-aligned UI. |
| lvh
| Largest viewport height (UI hidden) | Situations where you want the full viewport height, but vh
behavior is okay. |
| dvh
| Dynamic viewport height (UI changes) | Full-screen sections that should resize fluidly with the changing viewport. |
| svw
| Smallest viewport width (UI visible) | similar to svh
, except uses width |
| lvw
| Largest viewport width (UI hidden) | similar to lvh
, except uses width |
| dvw
| Dynamic viewport width (UI changes) | similar to dvh
, except uses width |
Example:
Let’s say you want a footer to always be visible at the bottom of the screen, even when the browser’s address bar is showing. Using svh
is the perfect solution:
css
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10svh; /* Adjust the height as needed */
background-color: #333;
color: white;
}
This footer will have a height of 10% of the smallest viewport height, ensuring it remains visible above the bottom toolbar. If you used 10vh
instead, the footer might be partially or completely hidden.
For a full-screen hero section that should adapt to the changing viewport size, dvh
would be appropriate:
css
.hero {
width: 100%;
height: 100dvh;
background-image: url('hero-image.jpg');
background-size: cover;
}
This hero section will dynamically resize as the user scrolls and the browser UI changes.
Browser Support
svh
, lvh
, and dvh
are relatively new additions to CSS, but they have excellent browser support across all modern browsers (Chrome, Firefox, Safari, Edge). You can check the current support status on caniuse.com.
Important Considerations:
- Overuse: Don’t use
svh
,lvh
, ordvh
for everything. Use them strategically where the dynamic viewport height is a genuine concern. For most layout elements, traditional units likevh
,em
,rem
, or percentages are still perfectly suitable. - Testing: Thoroughly test your designs on various mobile devices and browsers to ensure the intended behavior. Browser developer tools are invaluable for simulating different viewport sizes and UI states.
- Logical Viewport Units: There also exist
svi
,lvi
,dvi
andsvb
,lvb
,dvb
which represent inline and block sizes respectively, instead of width and height. - Fallback for older browsers: Use
@supports
to provide a fallback for browsers that do not support the new units.
“`css
.element {
height: 100vh; / Fallback for older browsers /
}
@supports (height: 100svh) {
.element {
height: 100svh; / Use svh if supported /
}
}
“`
Conclusion
svh
(and its companions lvh
and dvh
) are essential tools for building truly responsive websites that gracefully handle the dynamic nature of mobile browser UI. Understanding their differences and appropriate use cases allows you to create layouts that are consistently visible and user-friendly, regardless of the browser’s toolbar state. By strategically using svh
to ensure critical content remains accessible, you can significantly improve the mobile user experience.