Size full-height panels for phones

Size full-height phone layouts with dvh, svh or lvh instead of vh, so they fit when the address bar moves.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Use 100dvh (or svh/lvh) for full-height panels and menus.

Example

.menu-panel {
  height: 100vh;   /* fallback for old browsers */
  height: 100dvh;
}

How to check

On a phone, the panel fits while the address bar collapses and expands.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/dynamic-viewport-units.