固定位置在移动浏览器的页脚

Posted 2023-03-21

【中文标题】固定位置在移动浏览器的页脚

【英文标题】：Fixed position on a mobile browser for footer

【发布时间】：2011-05-18 11:25:40

【问题描述】：

美好的一天，我有这样的元数据

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

现在我可以用 js 获取高度视口了 我想用它来修改我的页脚，使其始终使用固定定位保持在屏幕底部。这是页脚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。

【参考方案1】：

另请参阅 Google 对此的解决方案 http://code.google.com/mobile/articles/webapp_fixed_ui.html

【参考方案2】：

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

【讨论】：

是的，这不起作用，我想使用视口的高度来修复页脚，任何提示。

@Cyber​​omin, .style.bottom = "0px";

【参考方案3】：

如果您通过移动浏览器表示“移动 safari”，那么您很不走运，它不支持固定位置。

相关回答：Fixed positioning in Mobile Safari

编辑：这个项目可能对你有帮助 -> http://cubiq.org/iscroll

【参考方案4】：

位置：固定从 android 2.2 开始可用。

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