html - 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'>