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?
+3
A:
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.
Squeegy
2010-03-16 17:15:45
I was kind of afraid that might be the case. Unfortunately, even this breaks down when you go to landscape. Guess I'll just have to try harder to design the app without it... Thanks for your answer though.
Hector Scout
2010-03-16 17:31:22
A:
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.
AlexanderN
2010-08-10 02:40:06
A:
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/
kingjeffrey
2010-09-14 19:45:13