How to Fix Bottom Padding for iOS Mobile Browsers

2 min read

Problem

Note: This article assumes an iOS device.

Let’s say your design has a bottom navbar on mobile-sized screens.

Something like this:

View on mobile after scrolling up before applying fix.

This looks fine.

However, when we start scrolling down, the mobile browser’s bottom menu goes away making our navbar tuck under the device’s home-slider at the bottom.

View on mobile after scrolling down before applying fix.

We don’t want that.

Luckily, the fix is simple.

Solution

We’ll add the following utility class:

/* This adds extra bottom padding on mobile browsers */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

Read more about env() on MDN.

Next, we’ll apply the class to the element that is overlapping at the bottom. For you, that might be your site’s <footer>.

<!-- Assume this is where your nav menu is -->
<footer class="safe-bottom">
  <!-- More stuff... -->
</footer>

In our HTML document’s <head>, we need to set the following:

<!-- Put this in your document `head` -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>

Now, when we scroll up, the navbar looks unchanged.

View on mobile after scrolling up after applying fix.

But when we scroll down, we get a extra bottom padding to make way for the home slider.

View on mobile after scrolling down after applying fix.

That’s all there is to it. 🎉

Hope this helps you build a better mobile experience for your users.