我正在尝试在我的网站上实现固定页脚。
我的问题是,当我滚动页面时,页脚与内容重叠。滚动完成后,它会回落到底部。这是标准行为吗?
I checked this link。它适用于桌面浏览器。即。页脚在滚动时保持固定。但是在移动设备(android)上它随页面滚动。我可以把它固定吗?
编辑:HTML已添加
<div data-role="footer" data-iconpos="left" data-id="jefooter" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>
<a href="/welcome" data-icon="jehome" data-iconpos="notext" data-direction="reverse" data-ajax="false">Home</a>
</li>
<li>
<a href="/mobile/users/settings" id="user_auth" data-icon="jesettings" data-iconpos="notext" data-transition="fade" data-ajax="false">My Settings</a>
</li>
<li>
<a href="/mobile/help" data-icon="jehelp" data-iconpos="notext" data-transition="fade" data-ajax="false">Help</a>
</li>
</ul>
</div>
</div>
您可以在m.qa.hungryzone.com上看到该页面
编辑2:
Android版本为2.3.5
答案 0 :(得分:8)
我通过替换
修复了它<meta name="viewport" content="width=device-width, initial-scale=1" />
与
<meta name="viewport" content="user-scalable=no,width=device-width" />
在html的标题中
并在页脚中添加一个新类以及data-role ='footer'
.footer {
position: fixed;
z-index: 10;
bottom: 0;
width: 100%;
}
答案 1 :(得分:3)
不幸的是,这似乎是jQuery Mobile在运行Android 2.3.5 - 2.3.6的设备上出现的错误。
jQuery Mobile的人们正在指责谷歌:
......这似乎有些昙花一现 - 在Android中出现了一种回归,谷歌似乎在以后的版本中进行修复,但随着所有Android问题的出现,它都不明确或不一致。
可以在此处找到开放式错误报告和更多详细信息: https://github.com/jquery/jquery-mobile/issues/4281
答案 2 :(得分:1)
您使用的是最新版本的jQuery Mobile吗?它仍然不完美,但比旧版本更好。这是最新的(1.2.0 alpha)......
http://jquerymobile.com/blog/2012/08/01/announcing-jquery-mobile-1-2-0-alpha/#download
修改强>
您可以停止使用jQuery Mobile固定页脚,并将此类添加到页脚:
.custom-fixed-footer {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
z-index: 999 !important;
}