Fixed header and footer in mobile version a website
I am developing a mobile version of my website which I am testing on my Samsung Galaxy S android mobile device running Froyo (2.2).
I would like to , when viewed with the standard internet browser, have a fixed header and a fixed footer ( which are always visible on screen) with the contents of the pages scrollable in between.
I tried all sorts of combinations with padding of body and the sorts (which seem to work when viewed on a browser on the pc), but can't seem to find a solution.
Can anybody help here ?
Note: if I try something like this :
<div id="header" style="position:absolute; top:0px; left:0px;height:200px;overflow:hidden;"></div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px;overflow:auto;"></div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px;overflow:hidden;"></div>
Both the header and footer are fixed but the content is not scrollable , e.g. it also appears fixed .
It might be the browser of the Android Froyo 2.2 of course.
Anyone ?
Answer
It seems that position:fixed is only partially supported in Android 2.2+, if you also add a particular meta tag. You should also note it's not supported at all under iOS. There are scripts to emulate the behavior, though(which I don't have right at hand.)