Today I was working on getting this site ready to launch, and I was adding the footer that you see on the bottom of the page. I wanted it to do the 'standard' footer thing of filling the screen when there wasn't much content, and scrolling as content was added.
My first try was to add the
min-h-screen tailwind class, which sets
This worked great in desktop browsers but not so well in iOS. See in iOS the viewheight includes
the top and botton OS overlays, which means that my footer was behind the address bar when I loaded up my homepage.
I found a fix for this, but this one seems specific to iOS only. Mobile Android will likely have a
different solution, so hopefully we can explore that soon too. But for iOS support you can use
-webkit-fill-available instead of
100vh. For I added this small tailwind override to my css:
/* Override for iOS Full Height Viewport */
And now my usages of
min-h-screen are working great on my phone!
My weekly newsletter tailored at developers who are eager to grow with me!
Every week will be unique, but expect topics focusing around Web Development and Rust