Question

我正在使用jquery和phonegap开发一个Windows移动应用程序。我已经为应用程序设置了页脚。

            <div class="footer" ></div>

在IE浏览器中正确显示。但它在模拟器中显示从窗口底部稍微向上。

Answer 1

问题用jquery-mobile标记。所以我假设您使用的是jQuery mobile。

为什么不使用jQuery移动页脚<div data-role="footer">？

然后通过添加data-postion="fixed"属性来实现此目的。即

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

在此处查找更多内容：http://view.jquerymobile.com/master/demos/widgets/fixed-toolbars/

Answer 2

在Windows Phone的PhoneGap应用程序的纵向视图的最底部固定定位元素的问题是浏览器控件默认会留一个空格以允许地址栏（尽管{{1} CSS属性）。

在向左和向右寻找解决方案后，我成功地使用媒体查询和-ms-viewport规则将我的页脚以纵向和横向模式显示在屏幕的最底部：

bottom: 0px

在纵向模式下实际降低页脚的更改是设置@media screen and (min-width: 320px) and (orientation:portrait) { @-ms-viewport { width: 320px!important; height:device-heigth!important; } } @media screen and (min-height: 320px) and (orientation:landscape) { @-ms-viewport { width:auto!important; height:320px!important; } }。但是，这样做显然会使其他默认视口设置无效，导致页面上的任何文本显得非常小。为了使文本可读，您还必须明确设置宽度，我在上面的示例中设置为320px - 您可以选择适合您的设置。

Answer 3

如果data-position =“fixed”不起作用，则从页脚div中删除data-position =“fixed”并尝试跟随，

.ui-footer{
    bottom: 0px; 
    left: 0px; 
    z-index: 10000; 
    width: 100%; 
    height: 2.5em; 
    position: fixed; 
    margin-bottom: 0px;
}

（也可以尝试添加！important到bottom，margin-bottom）

Answer 4

.footer{
        bottom:0px !important;
        position:absolute !important;
        width:100% !important;
 }

这解决了我在Windows Phone 8上的页脚问题。现在它位于页面底部

页脚不在窗口的底部，（windows mobile的phonegap jquery移动应用程序）

4 个答案: