修复了移动版网站中的页眉和页脚答案

【问题标题】：Fixed header and footer in mobile version a website修复了移动版网站中的页眉和页脚
【发布时间】：2011-01-21 14:57:10
【问题描述】：

我正在开发我的网站的移动版本，我正在运行 Froyo (2.2) 的三星 Galaxy S android 移动设备上进行测试。

我希望在使用标准互联网浏览器查看时，有一个 固定页眉 和一个 固定页脚（它们始终在屏幕上可见），其内容为之间可滚动的页面。

我尝试了各种与 body 的填充和排序的组合（在 pc 上的浏览器上查看时似乎可以工作），但似乎找不到解决方案。

有人可以帮忙吗？

注意：如果我尝试这样的事情：

<div id="header" style="position:absolute; top:0px; left:0px;height:200px;overflow:hidden;"></div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px;overflow:auto;"></div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px;overflow:hidden;"></div>

页眉和页脚都是固定的，但内容不可滚动，例如它也似乎是固定的。

当然可能是Android Froyo 2.2的浏览器。

有人吗？

【问题讨论】：

标签： android html css android-2.2-froyo mobile-website

【解决方案1】：

如果您还添加了特定的元标记，那么在 Android 2.2+ 中似乎 position:fixed 只是 partially supported。您还应该注意它在 iOS 下根本不受支持。不过，有一些脚本可以模拟这种行为（我手头没有。）

【讨论】：

这是 Android 所需的元标记：

【解决方案2】：

以下网站解释了此问题的状态。

http://bradfrostweb.com/blog/mobile/fixed-position/

作者提出了一些 JavaScript 解决方案。

【讨论】：

【解决方案3】：

由于您可能只想构建一次并且希望透明地支持多个移动设备，我建议您看看：JQuery Mobile

Article on page layout

【讨论】：

这是一个很好的建议...但是您真的尝试过 JQM 固定工具栏吗？至少从 Alpha 4 开始，它们在 iOS 或 Android 上都不能很好地工作。

【解决方案4】：

如果您已经在使用最小的屏幕空间，为什么还需要固定的页眉和页脚？考虑到每个浏览器窗口可能都不够大，无法实用。当有人横向查看您的页面并且您的页眉和页脚都固定时会发生什么？

即使在 Nexus S 上，在 800x480、100% 缩放时，页眉和页脚也会占据页面的一半，而且是纵向的。在风景中，忘记它......

还有其他设计可以很好地工作吗？

链接有什么用？如果它们非常重要，那么以另一种方式重复它们可能是有意义的。

【讨论】：

这不会使关于为什么这不起作用的问题无效。您可能希望有一个带有站点名称的非常小的页眉，以及一个带有版权的非常小的页脚。随便。
我完全理解。你的目标受众是谁？仅限 Android 用户？
抱歉（非常）迟到的回复。不，不仅是 Android，还有一般的移动用户（我想从现有的 www.site 创建一个 m.site 版本）并且喜欢固定页眉和/或页脚的想法，以便用户始终可以选择回到网站的开头。