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
Joao
Joao•10mo ago
Well, I'm not gonna lie: I use overflow: hidden 🤭
b1mind
b1mind•10mo ago
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
Frank
Frank•10mo ago
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.
JQ
JQ•10mo ago
Do you ever find yourself using dvh?
Frank
Frank•10mo ago
No but I imagine it’d be useful in specific situations.
Skylark
Skylark•10mo ago
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 it
clevermissfox
clevermissfox•10mo ago
I’ve been implementing svh with a vh fallback. I don’t see much difference bw dvh and vh myself
b1mind
b1mind•10mo ago
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.
Want results from more Discord servers?
Add your server