JQuery Mobile - 内容和页脚之间的空间答案

【问题标题】：JQuery Mobile - Space between content and footerJQuery Mobile - 内容和页脚之间的空间
【发布时间】：2014-01-20 01:24:25
【问题描述】：

我正在使用 JQuery Mobile 1.4.0 开发我的第一个移动网站，它只需要在具有 apple-mobile-web-app-capable 的 iPad 上运行。

我想要实现的就是删除内容 div 和页脚 div 之间的空白。我不知道它来自哪里以及如何摆脱它。

    <div data-role="page" id="pagec" data-theme="a">
  <div data-role="header" data-id="head2" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <?php getNav(); ?>
        </ul>
    </div>
  </div>
<div data-role="content">
  <!-- SWIPE -->
  <?php getContent(); ?>  
  <!-- //SWIPE -->    
</div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <?php getForm(); ?>
  </div>
</div>

该空间仅出现在 iPad 上 - Firefox 没有问题。

有与此类似的主题，但没有适合我的解决方案...

【问题讨论】：

您的 css 将帮助我们识别问题。另一个问题，您使用的是 safari 还是 google chrome？
您能提供一个在线演示（如 jsfiddle），我们可以在其中使用我们的 ipad 访问它吗？
我没有对 JQuery Mobile CSS 做任何修改。
那么像 23tux 这样的 jsfiddle 会很有帮助。
jsfiddle.net/Stressfish/8P8yv

标签： jquery html css jquery-mobile

【解决方案1】：

如果您的页面只需要在 iPad 上运行，那么您是否可以只使用 CSS？以下应该有使页脚与Firefox中的内容重叠的效果，但它应该可以解决iPad上的问题

在页面标题中输入以下内容：

<style>
     #footer {
     position:relative;
     top:-20px; }
     </style>

更改页脚 div 给它一个 id

 <div id="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
   <?php getForm(); ?>
 </div>

【讨论】：

【解决方案2】：

我发现了问题。我的错！ viewport-meta 中的 height-attribute 错误。

<meta name="viewport" content="height=device-height, width=device-width,initial-scale=1.0,maximum-scale=1.0">

...改为...

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >

【讨论】：