HTML5 - 在页面转换之间保持页眉和页脚稳定

Question

有没有办法让页面的页眉和页脚保持稳定，并且在两页之间的转换中只移动jquerymobile中页面的内容部分？

我有以下两页

    page1.html
     <header>
       ....
     </header>

     <content>
       ....<!--content1-->
     </content>

     <footer>
       .....
     </footer>

     page2.html
      <header>
       ....
     </header>

     <content>
       ....<!--content2-->
     </content>

     <footer>
       .....
     </footer>

逻辑：

• 我需要在页面之间使用幻灯片转换。
• 使用JQueryMobile，phoneGap

问题：

• 如何保持页面中的页眉和页脚稳定？即只有内容部分在转换时移动
• 我希望它适用于ios和Android设备。
• 有没有css方式呢？

Answer 1

使用data-id和data-position来保持页面的页眉和页脚稳定，只移动内容与页眉和页脚中的内容一样

<div data-role = 'header' data-id="persistent" data-position='fixed' data-tap-toggle="false"  data-theme = 'b'>