1

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

1 回答 1

0

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

于 2012-07-13T21:49:01.570 回答