How do you work with 100vh on mobile devices?
Hi Folks,
How do you guys work with 100vh on mobile devices when your content is overflowing? I have resolved the issue with setting height to auto but I want to know how others resolve this issue on mobile.
8 Replies
Well, I'm not gonna lie: I use
overflow: hidden ðŸ¤I don't use it 😶
Vmin or vmax, or 100%. New units when support isn't an issue svh and lvh... I'm still not sure how dvh is that different than vh so I've been avoiding it too lol
min-height: 100vh. That way overflowing content will be larger than 100vh.
I use 100svh, and typically only use this for hero sections where I can control the content so it never overflows.
Also, when I was playing with the new CSS scroll animations I learned that overflow: clip is what you typically want instead of overflow: hidden.Do you ever find yourself using dvh?
No but I imagine it’d be useful in specific situations.
vh is defined by the browser not by you
While dvh works the same on every browser
At least that’s how I’ve understood itI’ve been implementing svh with a vh fallback. I don’t see much difference bw dvh and vh myself
Yea vh and dvh on mobile in my testing pretty much have the same behavior.. I can't test iPhones physically, but both seem to hide the bars then the content shifts and recalculate the height.
I can see in spec how its different but again in real use I just avoid them both as they don't do what I've wanted.
that is why I use 100%/svh/lvh fallbacks mostly or again vmin/vmax in media query if needed now.