javascript - HTML页脚未固定在移动设备页面的底部

Question

在移动设备上查看我的HTML网页时遇到麻烦。

我使用了页脚标记来保存我的所有页脚信息，这些信息直接显示在网页底部。在计算机上查看网站时，页脚工作正常，但在移动设备上查看我的网页时，页面底部会出现故障，而我能描述的唯一方法是页脚标记未锁定在底部的页面（请参阅所附图片。）

页脚标记的CSS：

#footer {
 padding-top: 20px;
 width: 1000px;
 height: 220px;
 border-top: 1px solid #F0F0F0;
 margin-top: 40px;
 margin-bottom: 0px;
 margin: 0 auto;
 font-weight: lighter;
 background-color: #191919;
 opacity: 0.7;
 filter: alpha(opacity=70);
 /* For IE8 and earlier */;
}

提前致谢。

Answer 1

您必须在页脚div中使用data-position:'fixed'属性：

<div id="footer" data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

http://demos.jquerymobile.com/1.2.1/docs/toolbars/bars-fixed.html

编辑

我还建议您将页脚的宽度更改为100％，因此无论设备的分辨率如何，您都始终跨越屏幕的宽度。并且消除了要自动定位的边距，而不是相对于上部元素的位置：

#footer {
 width: 100%;
 height: 220px;
 border-top: 1px solid #F0F0F0;
 font-weight: lighter;
 background-color: #191919;
 opacity: 0.7;
 filter: alpha(opacity=70);
 /* For IE8 and earlier */;
}

编辑2

根据您网站的当前结构，我建议以下内容：

忘记页脚中的data-role="footer" data-position="fixed"，没有jquerymobile没用。

将主要div的每个固定宽度更改为100％，然后删除所有margin:0px auto;。用于主要容器。这样，您无需为每个屏幕尺寸都提供新的宽度，也不需要通过margin：0 auto属性来重新确定屏幕中的位置。

尝试以下CSS更改：

body {
  background: url(background.jpg) fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
} 

div.content_holder { 
    width:100%; 
    height:auto; 
    }

div.contain_nav { 
    width:100%; 
    height:50px;  
    }


#footer {
  padding-top: 20px;
  width: 100%;
  height: 220px;
  border-top: 1px solid #F0F0F0;
  font-weight: lighter;
  background-color: #191919;
  opacity: 0.7;
  filter: alpha(opacity=70);
 /* For IE8 and earlier */;
}

将页脚放在content_holder之外

无论如何，我建议您使用jquery移动版进行网络操作，使用时会看到变化。