2

在我的 Phonegap 应用程序上，我试图制作一个固定的页脚和页眉，实际上在 Android 4.0 中效果很好。但在 Android 2.3 上，即使它看起来不错，当我开始滚动页眉和页脚时，页眉和页脚根本不会保持固定，随着滚动。

相关代码如下：

HTML：

<div class="container-fluid no-padding">
<div id="header">

</div>  
<div class="wrapper">
    <div id="main-content"></div>
    <div id="push"></div>
</div>
<div id="footer" class="main-footer">

</div>

CSS：

html,body,.container-fluid {
    height: 100%;
    font-family: Helvetica !important;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -20px; /* the bottom margin is the negative value of the footer's height */
    overflow: scroll;
}

#footer, #push {
    height: 20px; /* .push must be the same height as .footer */
    width: 100%;
}

#footer {
    position: fixed;
    z-index: 10; /* Defect #9 */
    margin: 0;
    bottom:0px;
}

#header {
    position: fixed;
    z-index: 5;
    height: 40px;
    background-color: #FFFFFF;
    width: 100%;
    top: 0px !important;
}

#main-content {
    margin-top: 45px;
}

.main-footer {
    background-color: #cf2129;
    color: #FFFFFF;
}

如果它是相关的，我没有使用 jQuery Mobile（我发现的大部分 awnsers 都与之相关），而是使用 Twitter Bootstrap。

欢迎任何指导

4

3 回答 3

10

我发现了，

只需将“user-scalable=0”添加到元视口标签。

Web 设计人员习惯于使用 CSS 的位置将元素固定到窗口：固定，然而，在移动浏览器领域，对固定定位的支持远没有那么普遍，而且更加古怪。

资料来源：http ://bradfrostweb.com/blog/mobile/fixed-position/

它告诉您需要了解的有关固定元素和移动浏览器的所有信息 :)

于 2013-05-16T15:31:26.180 回答
2

我似乎找到了适用于 Android 2.2 和 2.3 的简单修复程序。只需添加：

-webkit-backface-visibility: hidden;到您使用固定定位的元素。

更多细节在这里：http ://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

没有对它进行详尽的测试，所以如果它不适合你，请告诉我。在此处进行测试的实时 URL：http: //codepen.io/benfrain/full/wckpb

于 2014-01-17T09:49:44.513 回答
0

这是我在开发 PhoneGap 应用程序时遇到的一种问题。有时它的 phonegap 版本与 android 版本不兼容。所以它会产生问题，但我过去也遇到过类似的问题。我做了什么而不是给出id 到 div 使用类。喜欢

<div class="header">
</div>

并且对于 css 使用类而不是 id。

.header
{
   position:fixed;
}

我知道这似乎很奇怪，有趣的答案。根本不值得。但这对我有用。这就是我与你分享的原因。

于 2013-05-11T05:13:18.033 回答