svh
A hundredth of the visible height with browser toolbars fully shown.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 108+ |
| Chrome Android | 108+ |
| Edge | 108+ |
| Firefox | 101+ |
| Firefox Android | 101+ |
| Safari | 15.4+ |
| Safari iOS | 15.4+ |
Formula 1svh = 1/100 of the height when browser toolbars are expanded
How it works
1svh is one percent of the small viewport height: the window as short as it ever gets, with every retractable toolbar showing. By definition 100svh is the largest height that stays visible whatever the toolbars do. A block of min-block-size: 100svh gives a short page the height of the small viewport and never less.
When the toolbars retract, the visible area grows past the small viewport, so a block set to exactly 100svh ends short of the bottom edge and shows whatever lies behind it. Give the page its own background. This follows from the definition; no phone toolbar has been watched here. In a desktop window, where nothing retracts, svh is vh: 8px per 1svh in a window 800px tall.
Try it
Viewport units for a window of your choice
Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.
10vw- 128px
10vh- 80px
10vmin- 80px
10vmax- 128px
On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.
The same as a table
| Unit | Laptop, 1280 by 800 | Phone, 390 by 844 |
|---|---|---|
10vw | 128px | 39px |
10vh | 80px | 84.4px |
10vmin | 80px | 39px |
10vmax | 128px | 84.4px |
What changes it
- Moves with
- the window size
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
A first screen whose button must stay visible while the toolbars are shown.
Watch out
svh is the smallest of the three heights. When the toolbars retract, 100svh stops short of the bottom edge of the screen and a strip behind it shows.
Before
.opening {
min-block-size: 100vh;
}After
.opening {
min-block-size: 100vh;
min-block-size: 100svh;
}