dvmax
A hundredth of the longer side that is visible right now.
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 1dvmax = 1% of max(dvw, dvh)
How it works
1dvmax is 1% of the larger of dvw and dvh, at this moment. Upright, the longer side is the height, so the value follows the toolbars. Wider than tall, the width is the longer side and the number holds steady.
A cover layer of exactly 100dvmax is as long as the longer visible side in both directions, so by definition it leaves no bare area at any moment, including while the toolbars slide. In a tall window the layer is resized every time the toolbars move.
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
- phone toolbars
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- the writing mode
Reach for it when
A cover shape that follows the visible area as the toolbars move.
Watch out
In a window taller than wide the larger side is the height, so the shape grows and shrinks with the toolbars.
.wash {
inline-size: 100dvmax;
aspect-ratio: 1;
}