lvmax
A hundredth of the longer side with browser toolbars retracted.
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 1lvmax = 1% of max(lvw, lvh)
How it works
1lvmax is 1% of the larger of lvw and lvh. In an upright window the larger side is the height, so it equals the large height and 10lvmax is as tall as the retracted window allows. In a window wider than tall it comes from the width.
Being the biggest of the readings, it is the one for cover shapes. A layer at exactly 100lvmax reaches across the large viewport in both directions, where 100svmax falls short by what the toolbars take when height is the longer side. The cost is overflow along the shorter side, so clip it with overflow: clip on the parent.
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 cover layer for the large viewport in either orientation.
Watch out
Sized this way a shape overshoots the window along its shorter side unless the window is square, so clip it or let it overflow on purpose.
.wash {
inline-size: 110lvmax;
aspect-ratio: 1;
}