Question

我正在使用JQuery Mobile 1.4.0开发我的第一个移动网站，该网站只需要在支持apple-mobile-web-app的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问题。

有类似的话题，但没有解决方案对我有用......

Answer 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>

Answer 2

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

<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" >

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

2 个答案: