考虑到 jQuery Mobile 框架的运行方式，有什么方法可以修复页面，使页脚始终与页面底部对齐 - 无论高度如何。
就目前而言，jQuery 页面的高度会发生变化，尤其是当设备从纵向旋转到横向时，因此解决方案必须考虑到这一点。
澄清一下 - 我不需要页脚位于视口底部，只是为了使默认页面高度不会低于视口高度。
谢谢。
【问题讨论】：
标签： css jquery-mobile
你可以在你的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/
【讨论】：
由于这个问题有点老了，很多事情都发生了变化。
您现在可以通过将其添加到页脚 div 来获得此行为
data-position="fixed"
更多信息在这里： http://jquerymobile.com/test/docs/toolbars/bars-fixed.html
还要注意，如果您将前面提到的 CSS 与新的 JQM 解决方案一起使用，您将无法获得适当的行为！
【讨论】：
就我而言，如果内容不多，我需要使用类似这样的东西将页脚固定在底部，但不要像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%;
}
【讨论】：
要在页眉或页脚上启用此行为，请添加
data-position="fixed"jQuery Mobile 页眉或页脚的属性 元素。
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
【讨论】：
jQm 提供：
这些都不起作用？
【讨论】：
以下几行可以正常工作...
var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );
【讨论】：
我想我会在这里分享我的纯 CSS 解决方案。这样可以避免为此使用 JS 的额外开销。
这不是固定位置的页脚。如果页面内容高于屏幕，页脚将在屏幕外。我觉得这样更好看。
body 和 .ui-page min-height 和 height 是防止页脚在过渡期间上下跳跃所必需的。
适用于目前最新的 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;
}
【讨论】：
这个脚本似乎对我有用...
$(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');
}
});
}
【讨论】：
添加 data-position="fixed" 并在 css 中添加以下样式将解决问题 z-index: 1;
【讨论】：
http://ryanfait.com/sticky-footer/
您可以使用它并使用 jQuery 来更新元素的 css 高度以确保它保持原位。
【讨论】：