iOS mobile safari - the bottom bar covers my footer

Question

iOS mobile safari has the address and bottom nav bar that come into view when you scroll upwards, and hide/minimize when you scroll down. I have a footer in my UI that gets hidden by the bottom nav bar, and I'm not sure what the best way to go about fixing this is. I could use javascript to detect the browser I'm using and then edit the css accordingly, but I wanted to know if there was a better, CSS only solution.

EDIT: I found a few examples of sites that do what I need, but I can't seem to duplicate their behavior.

• http://fetedelabiere.promo-agency.com/mobile/instant-verif-age
• http://www.mountaindew.com/
• http://fornacestudio.com/mobileapp/#projects

Answer 1

One solution could be to give a little more of padding-bottom to your main container in order to leave some space to the iPhone bottom bar.

Just use this code to target the mobiles with Safari:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding-bottom: 65px; //resize 
    }
}

And don't forget to add the .safari_only class to the element you want to target (should be your main container), example:

<div class='safari_only'> This div will have a padding-bottom:65px in a mobile with Safari  </div>

One detail: this is gonna affect also the Safari browser on Android devices, but fortunately not many users use Safari on an Android device, anyway if you need it you can use another css rule for overwriting that rule on Android.