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

【问题标题】：HTML5 - keep the header and footer stable between page transitionHTML5 - 在页面转换之间保持页眉和页脚稳定
【发布时间】：2013-10-16 14:24:48
【问题描述】：

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

我有以下两页

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

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

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

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

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

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

逻辑：

我需要在页面之间使用幻灯片过渡。
我正在使用 JQueryMobile，phoneGap

问题：

如何在页面中保持页眉和页脚稳定？即只有内容部分在过渡时移动
我希望它可以在 ios 和 android 设备上运行。
有没有 css 的方式来做呢？

【问题讨论】：

Disable page transition on data-role="header" at jQuery Mobile 可能重复。
在那里设置“位置：固定”，这样就可以了
@FrédéricHamidi 我之前使用过这个答案，但它使我的页面高度增加了页眉的高度。如何控制这种行为？
@wikijames 你是在告诉 css 属性吗？

标签： html jquery-mobile cordova

【解决方案1】：

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

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

【讨论】：

我之前使用过这个答案，但它使我的页面高度增加了页眉的高度。如何控制这种行为？