移动浏览器上页脚的固定位置
美好的一天,我有一个像这样的元
<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。
Good day, i have a meta like this
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalabale=no, width=device-width, height=device-height" />
Now i can get the height view port with js
i want to use it to modify my footer so it stays always at the bottom of the screen using either a fixed positioning. here is the footer 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;*/
}
how do i modify this footer using JS to get the right thing. Thank you.
@cyberomin.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
如果您所说的移动浏览器指的是“mobile safari”,那么您就不走运了,它不支持固定位置。
相关答案: Mobile Safari 中的固定定位
编辑:这个项目可能对您有帮助 -> http://cubiq.org/iscroll
If you by mobile browser mean "mobile safari", you're out of luck, it does not support position fixed.
Related answer: Fixed positioning in Mobile Safari
Edit: This project might be helpful for you -> http://cubiq.org/iscroll
从 Android 2.2 开始,position:fixed 就可用了。
然而,对于 iPhone 等其他设备,您必须有一个模拟本机滚动条的解决方案:这种类型的解决方案可通过 JavaScript 工具包 眨眼。该工具包可以轻松创建 Web 应用程序,同时保持简单易用(无需学习 API)。查看 Scroller 组件上的示例。
The position:fixed is available since Android 2.2.
However for other devices like IPhone, you must have a solution that simulates the native scroller : this type of solution is available through the JavaScript toolkit Wink. This toolkit allows to make WebApps easily while remaining simple to use (no need to learn an API). Look at the examples on the Scroller component.
另请参阅 Google 对此的解决方案
http://code.google.com/mobile/articles/webapp_fixed_ui.html
See also Google's solution to this
http://code.google.com/mobile/articles/webapp_fixed_ui.html