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已经写了一个很好的插件，你可以在这里找到：
jQuery Mobile在iScroll插件
http://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

希望您能找到答案。

strong>

An answer update

现在可以使用 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屋！