lvb
One percent of the large viewport, measured in the direction lines pile up.
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 1lvb = 1/100 of the large viewport in the block direction
How it works
1lvb is the large viewport measured along the block axis, which is lvh for horizontal text. A full-bleed backdrop takes two lines, inline-size: 100lvi and block-size: 100lvb, and in a window 1280 by 800 it measured 1280 by 800 on a horizontal page and on a vertical one alike.
On a horizontal page those lines mean the same as 100lvw and 100lvh, so the logical spelling costs nothing now and already covers a vertical-text version. The large reading also means the lower strip hides behind the toolbars while they are shown, since lvb counts the window as if they were gone.
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
- the writing mode
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
Reach for it when
A full-bleed backdrop described without naming a side of the screen.
Watch out
In horizontal text lvb is lvh, which is also what plain vh already means.
.cover {
min-block-size: 100lvb;
}