---
title: "Size full-height panels for phones · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/dynamic-viewport-units
updated: 2026-10-20
licence: "All rights reserved"
---

# Size full-height panels for phones

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Size full-height phone layouts with `dvh`, `svh` or `lvh` instead of `vh`, so they fit when the address bar moves.
- How: Use `100dvh` (or `svh`/`lvh`) for full-height panels and menus.
- Check: On a phone, the panel fits while the address bar collapses and expands.

Example:

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

**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`.

- Previous: [Keep room for the scrollbar](https://agentwranglers.se/playbook/website/interface/scrollbar-gutter)
- Next: [Animate on scroll with CSS](https://agentwranglers.se/playbook/website/interface/scroll-driven-animations)
- [Interface](https://agentwranglers.se/playbook/website/interface)