jQuery Mobile:将页脚粘贴到页面底部 [英] jQuery Mobile: Stick footer to bottom of page

问题描述

有什么办法，记住 jQuery Mobile 框架的运行方式，来修复页面，使页脚始终与页面底部对齐 - 无论高度如何.

Is there any way, bearing in mind the way the jQuery Mobile framework operates, to fix the page so that the footer always aligns with the bottom of the page - no matter the height.

事实上，jQuery 页面的高度会发生变化，特别是当设备从纵向旋转到横向时，因此解决方案必须考虑到这一点.

As it stands the height of a jQuery page will change, especially as devices are rotated portrait to landscape, so the solution would have to take this into account.

只是为了澄清 - 我不需要页脚位于视口的底部，只是工作以使默认页面高度不会低于视口高度.

Just to clarify - I don't need the footer to be at the bottom of viewport, just working so that the default page height doesn't drop below the viewport height.

谢谢.

推荐答案

您可以在 css 文件中添加:

You can add this in your css file:

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}  

因此页面数据角色现在具有 100% 的高度，并且页脚处于绝对位置.

So the page data-role now have 100% height, and footer is in absolute position.

Yappo 还编写了一个出色的插件，您可以在这里找到:iScroll 插件中的 jQuery Mobilehttp://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

Also Yappo have wrote an excellent plugin that you can find here: jQuery Mobile in a iScroll plugin http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

希望你找到了答案！

答案更新

您现在可以使用 data-position="fixed" 属性将页脚元素保持在底部.
文档和演示:http://view.jquerymobile.com/master/demos/toolbar-fixed/

You can now use the data-position="fixed" attribute to keep your footer element on the bottom.
Docs and demos: http://view.jquerymobile.com/master/demos/toolbar-fixed/

这篇关于jQuery Mobile:将页脚粘贴到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！