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

The following site explains the state of this issue.

http://bradfrostweb.com/blog/mobile/fixed-position/

The author suggests a few JavaScript solutions.

• iScroll 4
• Scrollability
• Sencha Touch
• Jquery Mobile