Fixed header and footer in mobile version a website

Question

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 1

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.)