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 ?

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

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

Since you probably only want to build this a single time and would like to support multiple mobile devices transparently, I would suggest you take a look at : JQuery Mobile

Article on page layout

If you are already working with minimal screen space, why would you want a fixed header and footer? Consider that every browser window may not be big enough for it to be practical. What happens when someone views your page in landscape and you have both a fixed header and footer?

Even on the Nexus S, at 800x480, at 100% zoom you will take up half the page in headers and footers and that's in portrait. In landscape, forget about it...

Is there another design that could work well?

What is the use for the links? If they are very important it might make sense to just repeat them another way.