How can I create a footer/toolbar in an iPhone web app?

Question

I'm working on a web app and I need to get a div to stick to the bottom of the viewport. Always viewable and always on the bottom of the viewport. There's an example of what I want here: footer . Unfortunately, this doesn't work on the iPhone. I can think of some ways to do this using javascript but I would rather not. Any ideas on how to get this effect on the iPhone using only css?

Answer 1

This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:

<header style="
    position: fixed; top: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Heading
</header>
<article style="margin: 20px 0">
    Your page here
</article>
<footer style="
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Footer
</footer>

...should work without problems. Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this javascript:

var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
    // load scrollability here. jquery example:
    $.getScript("/js/scrollability.min.js", function() {
        // code to run when scrollability's loaded
    }
}

Answer 2

You can't. At least not the way you think.

You have to fake the entire thing is javascript. Use something like iScroll

It sort of sucks but Mobile Safari does not support any kind of fixed positioning at all. So you have to make the page size equal to the screen size and then use javascript to handle touches and set scroll offsets and animate scrollbars and what not manually.

This script I linked does a lot of that for you, but it's not as robust as a native solution would be.

Answer 3

Here is an example on how to combine CSS3, HTML, and JavaScript to create a navbar for the iPhone. http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/

ps: It does work in landscape mode.

Answer 4

Here is a working example, with code. It is not for the faint of heart:

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 5

There is a new JavaScript for this that works much easier: http://joehewitt.github.com/scrollability/

Therefore in iOS 5 there will be fixed position and overflow scroll available!