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

时间:2011-01-21 14:57:11

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

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

我希望在使用标准互联网浏览器观看时,有一个固定页眉和一个固定页脚(它们总是在屏幕上可见),内容为页面可在两者之间滚动。

我尝试了各种各样的组合,包括身体填充和排序(在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的浏览器。

任何人?

4 个答案:

答案 0 :(得分:6)

如果您还添加了特定的元标记,那么在Android 2.2+中,position:fixed仅为partially supported。你还应该注意到它在iOS下根本不受支持。但是有一些脚本可以模拟这种行为(我手边没有。)

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:1)

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

Article on page layout

答案 3 :(得分:-1)

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

即使在Nexus S上,800x480,在100%变焦时,您将占据页眉和页脚的一半页面,而且是纵向的。在风景中,忘了它......

还有其他设计可以运作良好吗?

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