Why does height: 100vh overflow under the mobile browser's toolbar? #42
Answered
by
Kevinchamplin
Kevinchamplin
asked this question in
Q&A
-
|
Why does height: 100vh overflow under the mobile browser's toolbar? |
Beta Was this translation helpful? Give feedback.
Answered by
Kevinchamplin
Jun 13, 2026
Replies: 1 comment
-
|
On mobile, 100vh is the largest viewport (toolbar hidden), so when the address bar is visible your 100vh element is taller than the visible area and the bottom is cut off. Use the dynamic viewport units instead: 100dvh tracks the currently-visible height, and svh/lvh give the small/large extremes when you need them. |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
Kevinchamplin
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
On mobile, 100vh is the largest viewport (toolbar hidden), so when the address bar is visible your 100vh element is taller than the visible area and the bottom is cut off. Use the dynamic viewport units instead: 100dvh tracks the currently-visible height, and svh/lvh give the small/large extremes when you need them.