jQuery Mobile:将页脚粘贴到页面底部

Question

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

因为它会改变jQuery页面的高度,特别是当设备从纵向旋转到横向时,所以解决方案必须考虑到这一点.

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

谢谢.

Answer 1

您可以在css文件中添加:

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

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

此外,Yappo写了一个很棒的插件,你可以在这里找到:iScroll插件中的jQuery Mobile http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

希望你找到答案!

答案更新

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

Answer 2

由于这个问题有点陈旧,很多事情都发生了变化.

您现在可以通过将此添加到页脚div来获得此行为

data-position="fixed"

更多信息:http: //jquerymobile.com/test/docs/toolbars/bars-fixed.html

另外要注意,如果您将前面提到的CSS与新的JQM解决方案一起使用,您将无法获得相应的行为!

Answer 3

在我的情况下,我需要使用这样的东西,如果没有太多内容,将页脚固定在底部,但不要像data-position="fixed"往常一样漂浮在所有内容之上......

.ui-content
{
    margin-bottom:75px; /* Set this to whatever your footer size is... */
}

.ui-footer {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

Answer 4

修正了基础知识

若要在页眉或页脚上启用此行为,请将该data-position="fixed"属性添加 到jQuery Mobile页眉或页脚元素.

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>