如何防止固定頁腳覆蓋JQuery Mobile頁面的內容？

我有一個JQuery Mobile應用程序，但是我有我自己的複雜頁腳div，它保留在頁面的底部，而不管它是什麼（position：fixed），並且不受JQM控制（它不是數據角色=「footer 「，而是在其自己的div部分，所以我只有一個爲整個應用程序）如何防止固定頁腳覆蓋JQuery Mobile頁面的內容？

問題是這個頁腳覆蓋了內容的最後幾行，如果它足夠長。

我認爲一個解決方案是以某種方式添加頁腳大小的填充，以便滾動條能夠正確顯示內容的最後一行。

因此，對於這個例子，我有一個長度爲n行的內容。當我滾動到底部時，我希望在頁腳上方看到此文件的最後一行。相反，我沒有看到最後幾行，因爲它們被頁腳覆蓋。

願望：

- - - - - - - - - - - - - - - - - - - 
|          | 
| Header       | 
|          | 
- - - - - - - - - - - - - - - - - - - 
Content Line n-3 
Content Line n-2 
Content Line n-1 
Content Line n 
- - - - - - - - - - - - - - - - - - - 
|          | 
| Footer        |

，但我發現

- - - - - - - - - - - - - - - - - - - 
|          | 
| Header       | 
|          | 
- - - - - - - - - - - - - - - - - - - 
Content Line n-6 
Content Line n-5 
Content Line n-4 
Content Line n-3 
- - - - - - - - - - - - - - - - - - - 
|          | 
| Footer        |

更新：

感謝的答覆，這也促使我下了正確的軌道。

添加以下到我的.css文件：

.ui-content 
{ 
    margin-bottom: 251px; /* The height of the footer */ 
}

與此問題是，如果頁腳高度的變化（不同的字體，或行被添加），那麼這將不會自動更新。我想我可以做一些Javascript來解決這個問題。

更新2：

我做到了動態通過實施如下：

.bind('pageinit', function() { 
    $(".ui-content").css('margin-bottom', $('#footer').height()); 
})

來源

2012-07-13 user991650

您在'...添加頁腳大小的填充...'的正確軌道上。嘗試在'div'中圍繞你的內容，並給它一個等於頁腳高度的「margin-bottom」。 – MrOBrian 2012-07-13 21:31:09

因爲我認爲你的頁腳是在內容之上的一層他們無法專門騰出每個其他所以我建議你在頁面尾部放一些填充頁面的形狀。這可以完成，因爲MrOBrian說，通過將您的內容放在<div margin-bottom=footer height>中，使用<br />，創建一個頁腳形狀<div>或許多其他許多選項。

來源

2012-07-13 21:49:01 user1515780

如何防止固定頁腳覆蓋JQuery Mobile頁面的內容？

回答

相關問題