dvh
A hundredth of the visible height, following the toolbars as they show and hide.
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 1dvh = 1/100 of the currently visible height
How it works
1dvh is the dynamic viewport’s height divided by 100: the window as tall as it is right now, toolbars included or not. By definition a chat window, a bottom sheet or a modal at 100dvh fills the visible area as the toolbars come and go, so its buttons do not hide behind a toolbar and no bare strip appears. No phone toolbar was watched in these tests.
The price is that the number moves while the toolbars move, and the box resizes with it. Use it on containers whose children do not mind, such as a flex column with a scrolling middle and a fixed header and footer. On a desktop, where nothing retracts, dvh equals vh: 8px per 1dvh 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
- 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 chat composer or a sheet that must end exactly where the visible area ends.
Watch out
A box in dvh is resized each time the toolbars move, in the middle of a scroll. Whether the on-screen keyboard counts as a toolbar is up to the browser; this site has not measured it on a phone.
Before
.thread {
block-size: 100vh;
}After
.thread {
block-size: 100dvh;
}