height: 100% not working on Android WebView
Company I'm working at has plans to implement web features in our native applications. Everything works fine out of the box for iOS, but on Android height: 100% (or 100vh) property applied to <html> tag does not appear to work and nothing is rendered. Fixed values seem to work just fine but aren't suitable for such a wide range of device screen sizes.
Looking for any useful resources or information regarding this issue.
I'm starting to lose hope, asking here as a last resort.
5 Replies
A URL or Codepen (or similar) would be useful.
Have you also applied the height to the body?
Unfortunately I can't share an url as it's proprietary info. Yes, I have applied height to every element in an attempt to find the solution.
Hi @Kim Jong. Maybe you can try using
svh instead of vh . That happens because of Chrome behavior in mobile devices. Kevin explain this in this video: https://youtu.be/veEqYQlfNx8?t=191. Hope this can help you understand and fix your problem.Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
i thought 100vh still worked, but using svh or dvh also accounted for the url bar? OPs height declaration of 100vh should still work.
body { min-height: 100vh; }
el { height: 100vh; height: 100svh; } Yup. That's correct. The svh and dvh units include the url bar. Using the vh unit it gets the entire navigator height with bars. Remember this only happens in some browsers for mobile devices.