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

有没有办法，考虑到jQuery Mobile框架的运行方式，修复页面，使页脚始终与页面底部alignment – 无论高度如何。

就目前而言，jQuery页面的高度将会改变，特别是当设备被旋转到纵向时，所以解决scheme必须考虑到这一点。

只是澄清 – 我不需要页脚在视口的底部，只是工作，以便默认页面高度不低于视口的高度。

谢谢。

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%;} 

所以页面数据angular色现在有100％的高度，页脚处于绝对位置。

此外Yappo写了一个很好的插件，你可以在这里find：jQuery Mobile的iScroll插件http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

希望你find答案！

答案更新

现在可以使用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解决scheme一起使用，您将无法获得适当的行为！

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

jQm提供：

• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html

这些工作都没有？

Answer 5

以下几行工作很好…

 var headerHeight = $( '#header' ).height(); var footerHeight = $( '#footer' ).height(); var footerTop = $( '#footer' ).offset().top; var height = ( footerTop - ( headerHeight + footerHeight ) ); $( '#content' ).height( height ); 

Answer 6

我以为我会在这里分享我的CSS唯一的解决scheme。 这样可以避免使用JS的额外开销。

这不是一个固定的页脚。 如果页面内容比屏幕高，则页脚将不在屏幕上。 我认为这样看起来更好。

body和.ui-page最小高度和高度是防止页脚在转换过程中上下跳动所必需的。

现在使用最新的JQM版本1.4.0

 body, .ui-page { min-height:100% !important; height:auto !important; } .ui-content { margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */ } .ui-footer { position:absolute !important; width:100%; bottom:0; } 

Answer 7

修正了基本知识

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

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

Answer 8

这个脚本似乎适用于我…

 $(function(){ checkWindowHeight(); $(document).bind('orientationchange',function(event){ checkWindowHeight(); }) }); function checkWindowHeight(){ $('[data-role=content]').each(function(){ var containerHeight = parseInt($(this).css('height')); var windowHeight = parseInt(window.innerHeight); if(containerHeight+118 < windowHeight){ var newHeight = windowHeight-118; $(this).css('min-height', newHeight+'px'); } }); } 

Answer 9

添加data-position =“fixed”并在css中添加下面的样式将解决问题z-index：1;

Answer 10

http://ryanfait.com/sticky-footer/

你可以使用这个，并使用jQuery来更新元素的CSS高度，以确保它保持原位。