獲取內容區域以填充「簡短」頁面上的全部可見區域？

Question

[使用jQuery Mobile版本1.3.2]

我正在開發一個jQM項目，在這裏遇到了一些困難。對於沒有太多內容的頁面（例如其上只有3個按鈕的主頁），並且當頁腳數據位置設置爲「內聯」時，頁腳下方會有一個很大的醜陋間隙...

當然，如果我設置頁腳的數據位爲「固定」，那麼它看起來好，如果在縱向模式下觀看...

但是...當它在橫向模式下看起來很糟糕，因爲內容區域幾乎沒有空間，由於頁眉和頁腳佔據了大部分的空間Ë可視面積...

所以，我的問題是...是有越來越頁腳固定在底部的情況下的內容區域不填滿一個很好的，工作液整個屏幕，然後讓頁腳位置自動切換到「內聯」，以便在內容區域填滿（至少）整個屏幕的情況下？

OR ...或者......當設備處於縱向模式時，是否可以使頁腳位置「固定」，然後在設備處於橫向模式時將頁腳位置切換爲「內聯」？

我已經花了幾個小時在今天在線研究這個問題，但到目前爲止我還沒有找到任何有希望解決這個問題的解決方案（我發現了一些論述這個主題的文章/論壇帖子，但是他們是從2 -3年前，少數提出的「解決方案」看起來像可能會產生比解決問題更多的問題）。

我不是在尋找一個100％跨瀏覽器（因爲我知道不存在）的解決方案，但只要我能找到一個在移動iOS和移動Android上運行良好的解決方案，我會很開心。

我會想象這將是一個相當受歡迎的問題，所以我有點驚訝，我還沒有遇到一個很好的解決方案到目前爲止（也許我只是還沒有找到正確的地方呢）。

那麼....有什麼想法？

謝謝！

Answer 1

您可以收聽resize和orientationchange事件，然後根據可用空間修復/取消修復頁腳。

這裏是一個DEMO

使用腳本，測量頭高度+頁腳高度+含量高度，並將其與總窗口高度（視口）。然後，添加或刪除頁腳DIV的UI尺固定類：

$(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>