dvb
A hundredth of what is visible right now, measured where lines stack.
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 1dvb = 1/100 of the current viewport in the block direction
How it works
1dvb is the dynamic viewport along the block axis, which is dvh for horizontal text. A modal sheet at min-block-size: 100dvb follows the visible area as the toolbars come and go, and keeps doing so after a switch to vertical writing.
Of the logical dynamic pair this is the one that follows toolbar changes on a horizontal page, since the block axis is vertical there. On a page set in vertical text the block axis runs sideways, and if the toolbars take only height they no longer affect it.
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
- the writing mode
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
Reach for it when
A full-screen sheet in a page that may switch between horizontal and vertical text.
Watch out
In horizontal text it equals dvh and moves with the toolbars exactly as dvh does.
.sheet {
block-size: 100dvb;
}