刪除內容和頁腳之間的空白區域：使用jQuery Mobile的移動應用程序

Question

我正在開發一個使用jQuery Mobile的移動應用程序，並且在內容和頁腳之間獲得空白區域。我如何關閉這個空間？

the site with the white at the bottom

Answer 1

有3個解決問題的對策。

1. 如果你可以使用相同的data-theme的內容和頁面容器。不幸的是，它不會好看，因爲仍然會有兩者之間的明顯的區別

2. 不要使用data-theme在容器但始終只使用它在頁面DIV。仍然不是最佳解決方案。

3. 調整您的內容的大小，以填充可用空間。使用此方法：

   function getRealContentHeight() { 
       var header = $.mobile.activePage.find("div[data-role='header']:visible"); 
       var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); 
       var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); 
       var viewport_height = $(window).height(); 
   
       var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 
       if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { 
        content_height -= (content.outerHeight() - content.height()); 
       } 
       return content_height; 
   } 
   

瞭解更多關於該解決方案在我的其他ARTICLE（我的個人博客），或發現HERE，尋找章：獲取正確的最大內容高度 。

Answer 2

可以調整UI頁面主題-A的色彩在你的風格/ CSS，所以你不會承認它提供的是不工作

.ui-page-theme-a 
{ 
    background-color: sameAsContent/Footer !important; 
    border-color: sameAsContent/Footer !important; 

}