logo标签列表

jQuery Mobile: 将页脚固定在页面底部

cssjquery-mobile
71

考虑到jQuery Mobile框架的工作方式，有没有一种方法可以修复网页，使页脚始终与页面底部对齐-无论高度如何。

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

只是为了澄清 - 我不需要将页脚放在视口底部，只是要让默认页面高度不低于视口高度。

谢谢。

这个对我起作用了：https://dev59.com/o2445IYBdhLWcg3wucmo - botbot
1
那对我也有效。看起来最佳答案已经过时了？ - commonpike
10个回答
115
你可以在CSS文件中添加以下内容：
[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

现在页面的 data-role 属性已经具有了 100% 的高度，并且页脚位于绝对位置。

此外，Yappo 写了一个非常出色的插件，你可以在这里找到它： 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/

5
这解决了桌面显示器的问题。但是，在手机上，现在页脚会停留在页面的中间位置。因此，我认为这个解决方案不行。不过，我喜欢纯CSS的方法。 - zzz
尝试过这个，页脚粘在屏幕底部直到我尝试滚动。页脚跟随其他所有内容一起移动。不过Yappo链接似乎有效。 - Kevin Schroeder
2
我更喜欢使用position:fixed来创建一个页脚，因为我希望它始终保持在底部可用。 - Nathan Fig
1
此答案已过时 - 请查看下面的解决方案。 - merrick
一个更新的答案在Windows Phone上不起作用，但在Android和iOS上运行良好。 - Faizan Mubasher
显示剩余5条评论
62

由于这个问题有些旧，很多事情已经发生了变化。

现在你可以通过将以下内容添加到页脚div中来获得此行为

data-position="fixed"

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

同时请注意，如果你把之前提到的CSS和新的JQM解决方案一起使用，将无法获得适当的行为！

2
这应该被标记为正确答案，使用jquerymobile 1.7+。 - Sudipta Chatterjee
3
唯一让人感到烦恼的是，它似乎总是浮在内容上方，而不是在内容较少时自动滚动到底部填补空白。 - jocull
@SudiptaChatterjee：“使用jquerymobile 1.7+”...你真是个厉害的预言家...:P - SASM
咳咳 - 不确定这是不是一个赞美 :) - Sudipta Chatterjee
在Windows Phone 8.0 JQM/PG项目中，存在一个大约50像素的间隙，您可以通过媒体查询来修复它，但仍有一些像素使得列表“下溢”到页脚后面 :-(... - GilesDMiddleton
15
在我的情况下，如果页面内容不多，我需要使用类似于以下这样的东西将页脚固定在底部，但不像 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%;
}
1
在我看来，最好的纯CSS解决方案 - Joseph Victor Zammit
当页面空间不足时，否则底部会遮挡部分页面内容。 - Mister Smith
5

固定基础

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

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>
2
这应该是答案。 - Cesar Bielich
3
2
不是我想要的方式。基本上，页面只会延伸到内容的高度，因此在具有大分辨率的桌面机器上，页脚将位于屏幕中间。我希望它足够智能，可以扩展以填充额外的空间。 - Sergio
我以为他们在测试版中修复了这个问题，如果没有，您可以使用CSS来修复页面高度：100％。 - Phill Pafford
2
下面的代码工作得非常好...
var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );
2
我想在这里分享我的纯CSS解决方案。通过这种方式，您可以避免使用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;
}
它对我没用，但jocull的更简单/精简的CSS解决方案很好用：https://dev59.com/a2w15IYBdhLWcg3wD3Zk#14669899 - Andreas Covidiot
这对我有用（JQM 1.4.5），jocull的解决方案也可以，但在我的测试中调整浏览器大小时会出现跳跃问题。ArcadeRenegade的方法很流畅！顺便说一句，不要与data-position="fixed"混淆，这会导致混乱... - ob.yann
1
在CSS中添加data-position="fixed"，并添加以下样式 z-index: 1; 可以解决该问题。
1

这个脚本对我来说似乎有效...

$(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');
        }
    });
}
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接