Forem

Corey Alexander
Corey Alexander Subscriber

Posted on • Originally published at coreyja.com on

iOS Full Height HTML

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 min-height: 100vh, on the body element. 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 */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}
Enter fullscreen mode Exit fullscreen mode

And now my usages of min-h-screen are working great on my phone!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

📊 A side-by-side product comparison between Sentry and Crashlytics

A free guide pointing out the differences between Sentry and Crashlytics, that’s it. See which is best for your mobile crash reporting needs.

See Comparison

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay