0

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

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

它在 IE 浏览器中正确显示。但它在模拟器中显示在窗口底部的一点点上方。

4

4 回答 4

4

这个问题用 jquery-mobile 标记。所以我假设你正在使用 jQuery 移动。

为什么不使用 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/

于 2013-08-13T11:39:05.060 回答
3

在 Windows Phone 的 PhoneGap 应用程序的纵向视图的最底部固定元素定位的问题是浏览器控件默认情况下会留出空白空间以允许地址栏（尽管有bottom: 0pxCSS 属性）。

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

@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; }
}

在纵向模式下实际降低页脚的更改是设置heigth:device-height!important. 但是，这样做显然会使其他默认视口设置无效，从而导致页面上的任何文本都显得非常小。为了使文本可读，您还必须明确设置宽度，我在上面的示例中将其设置为 320px - 您可以选择适合您的设置。

于 2013-10-18T19:32:38.127 回答
1

如果 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 添加到底部，边距底部）

于 2013-08-13T11:39:25.450 回答
1 
.footer{
        bottom:0px !important;
        position:absolute !important;
        width:100% !important;
 }

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

于 2013-12-27T09:16:52.877 回答