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

【问题标题】：How do I prevent a fixed footer from covering up the content of a JQuery Mobile page?如何防止固定页脚覆盖 JQuery Mobile 页面的内容？
【发布时间】：2012-07-13 18:51:07
【问题描述】：

我有一个 JQuery Mobile 应用程序，但我有自己的复杂页脚 div，无论如何它都位于页面底部（位置：固定），并且不受 JQM 控制（它不是 data-role="页脚”，而是在它自己的 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());
})

【问题讨论】：

您与...add padding of the size of the footer... 走在了正确的轨道上。尝试将您的内容用div 包围，并给它一个等于页脚高度的margin-bottom。

标签： jquery css jquery-mobile footer

【解决方案1】：

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

【讨论】：