CODEWITHSUNDEEP
html
user2157556
user2157556

Reputation: 13

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!

Upvotes: 1

Views: 1238

Answers (1)

sam_7_h
sam_7_h

Reputation: 800

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%;

}

Upvotes: 1

Related Questions