Q:

How can I fix header and footer position on mobile device?

I am developing phonegap application which will be run on mobile device.
But now I have some problems.
When I touch mobile screen up or down,header or footer of page is disappeared.
HTML code is as followed.
...
<body>
   <div data-role="page" id="page1">
      <div data-role="header" data-position="fixed">
         Header!!!
      </div>
      <div data-role="footer" data-position="fixed">
         Footer!!!
      </div>
   ... ...
   </div>
</body>

Anyone helps me!

A:

Here is the css that you could use for the footer
footer {
width: 100%;
margin: 0%;
position: fixed;
bottom: 0%;

}
For the Header it would be something similar like this:
header {
width: 100%;
margin: 0%;
position: fixed;
top: 0%;

}

