The `dvh` unit equals one percent of the browser’s current visible viewport height. Unlike `vh`, it updates when mobile browser interface elements, such as address bars, appear or disappear. section 3.1.4 section 6.4.4
Use `dvh` when an element should follow the visible screen:
- `height: 100dvh` makes a panel or background fill the visible viewport at the current moment. section 6.4.4
- A full-page image using `100vh` can extend beneath mobile browser UI; replacing it with `100dvh` reflects the height actually visible on load. section 6.4.5 section 6.6
- Dynamic resizing can reflow content during scrolling, so reserve `dvh` for crucial panels and screen-filling elements rather than long text pages. section 6.4.4
A screen-filling mobile panel
Use `height: 100dvh` when a panel must track the visible screen as browser UI changes. For a multipanel app, combine it with fixed viewport-based rows: `.app { display: grid; grid-template-rows: 10svh 1fr 8svh; height: 100dvh; }`. section 6.4.4 section 6.6
Listing 6.5 The 100dvh overflow fix
.fullscreen {
height: 100dvh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Inspect the complete `.fullscreen` rule that applies `100dvh` to a centered, vertically distributed panel. section 6.4.4
