jquery - 如何防止固定页脚覆盖 JQuery Mobile 页面的内容？

Question

我有一个 JQuery Mobile 应用程序，但我有自己复杂的页脚 div，无论如何它都位于页面底部(位置:固定)，并且不受 JQM 控制(它不是数据 Angular 色=页脚”，而是在它自己的 div 部分，所以整个应用程序我只有一个)

问题是如果页脚足够长，它会覆盖内容的最后几行。

我认为一个解决方案是以某种方式添加页脚大小的填充，以便滚动条可以正常工作以显示内容的最后几行。

所以对于这个例子，我有一个 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());
})

Answer 1

因为我假设您的页脚位于内容上方的一层中，所以它们无法专门为彼此腾出空间，因此我建议您在内容末尾放置一些页脚形状的填充物。正如 MrOBrian 所说，这可以通过将您的内容放在 <div margin-bottom=footer height> 中来实现。 , 使用 <br /> , 创建一个页脚形状 <div>或您找到的许多其他选项。