移动浏览器中固定页脚位置的解决方法

Question

你好，我有一个像这样的meta标签

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

现在我可以使用JavaScript获取视口的高度，我想使用它来修改我的页脚，使其始终保持在屏幕底部，可以使用固定定位。以下是页脚的CSS代码：

#footer
{
height:30px;
background-color:#D9D9D9;
background-image:url(../images/footer.png);
background-repeat:repeat-x;
margin-top:20px;
width:100%;
/*bottom:0;
position:fixed;*/
}

我该如何使用JS修改页脚以得到正确的结果？谢谢。@cyberomin。

- Cyberomin

Answer 1

参见谷歌对此问题的解决方案：http://code.google.com/mobile/articles/webapp_fixed_ui.html

- Alex Nolasco

Answer 2

position:fixed 属性从 Android 2.2 开始可用。

然而，对于其他设备如 iPhone，您必须有一个模拟原生滚动条的解决方案：这种类型的解决方案可以通过 JavaScript 工具包Wink获得。该工具包允许轻松制作 Web 应用程序，同时保持简单易用（无需学习 API）。请查看 Scroller 组件上的示例。

- WinkSl

Answer 3

如果您所说的移动浏览器是指“移动Safari”，那么很遗憾，它不支持固定位置。

相关回答：移动Safari中的固定定位 编辑：这个项目可能对您有帮助 -> http://cubiq.org/iscroll

- Daniel

Answer 4

document.getElementById("footer").style.position = "fixed";

- Greg

---

是的，这个方法不起作用，我想使用视口的高度来固定页脚，有什么建议吗？ - Cyberomin

@Cyberomin，.style.bottom = "0px"; - Greg