获取内容区域以填充“短”页面上的总可见区域？

Question

[使用jQuery Mobile版本1.3.2]

我正在研究一个jQM项目，并且在这里遇到了一些困境。对于没有太多内容的页面（例如主页上只有3个按钮），当页脚数据位置设置为“内联”时，页脚下方有一个很大的缺口... < / p>

当然，如果我将页脚的数据位置设置为“固定”，那么在纵向模式下查看它看起来很好......

但......当它以横向模式观看时，它看起来很糟糕，因为内容区域几乎没有任何空间，因为页眉和页脚占据了大部分可见区域......

所以，我的问题是......是否有一个好的，有效的解决方案，在内容区域没有填满整个屏幕的情况下将页脚固定到底部，然后让页脚位置自动切换在内容区域填满（至少）整个屏幕的情况下“内联”？

或... ...交替......当设备处于纵向模式时，是否可以将页脚位置“固定”，然后在设备处于横向模式时将页脚位置切换为“内联”？

我今天花了几个小时在线研究这个问题，但到目前为止我还没有找到任何有希望解决这个问题的方法（我找到了一些文章/论坛帖子来解决这个问题，但他们来自2- 3年前，少数提出的“解决方案”看起来可能会产生比他们解决的问题更多的问题。

我不是在寻找100％跨浏览器的解决方案（因为我知道它不存在），但只要我能找到适合移动iOS和移动Android的解决方案，我就是'我很高兴。

我认为这将是一个相当受欢迎的问题，所以我有点惊讶到目前为止我还没有找到一个好的解决方案（也许我还没有找到合适的地方）。< / p>

所以....任何想法？

谢谢！

Answer 1

您可以收听resize和orientationchange事件，然后根据可用空间修复/取消固定页脚。

  

这是 DEMO

使用脚本，测量标题高度+页脚高度+内容高度，并将其与总窗口高度（视口）进行比较。然后在页脚div上添加或删除ui-footer-fixed类：

$(document).on("pagebeforeshow", "#page1", function(){
    $(window).on("orientationchange resize", function(){
        FooterPositionFixed()
    });

    setTimeout(FooterPositionFixed, 300);
});

function FooterPositionFixed(){
    scroll(0, 0);
    var totHeight = $(window).height();

    var headerHeight = $("#jqmHeader:visible").outerHeight();
    var footerHeight = $("#jqmFooter:visible").outerHeight();
    var contentHeight = $("#jqmContent:visible").outerHeight();

    if (totHeight > (headerHeight + footerHeight + contentHeight)){
        if (!$("#jqmFooter").hasClass("ui-footer-fixed")){
            $("#jqmFooter").addClass("ui-footer-fixed");
        }
    } else {
        if ($("#jqmFooter").hasClass("ui-footer-fixed")){
            $("#jqmFooter").removeClass("ui-footer-fixed");
        }

    }
}

以下是此脚本的HTML：

<div data-role="page" id="page1">
    <div data-role="header" id="jqmHeader">
         <h1>My page</h1> 
    </div>
    <div data-role="content" id="jqmContent">
        <ul data-role="listview">
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed" id="jqmFooter">
        <h2><a>Go to website</a><br />Copyright<br /> business name</h2>
    </div>
</div>