3

我正在使用 Windows mobile 测试我的移动应用程序。我在页脚部分遇到了一些问题。问题与页脚修复有关。当我滚动内容时，页脚也起来了。但是页脚在所有浏览器中都是固定的，包括 IE 和除 windows 版本之外的所有手机。

查看代码，对于我给的 IE，

* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

编辑：

html, body {height: 100%;}

#wrapper {min-height: 100%;}


#footer {
    position:fixed; z-index:999;
    width:100%;
    bottom:-20px;
    margin-top: -72px; /* negative value of footer height */
    margin-top: 0px !ie; /* for IE */
    height: 92px;
    clear:both; text-align:center;
    background:url(../../) repeat-x #115c9c;
    }
4

5 回答 5

5

Windows Phone 7 – Mango 前后都忽略固定定位并将固定元素呈现为 position: static。您测试的 IE9 桌面和其他浏览器支持位置：已修复。 http://bradfrostweb.com/blog/mobile/fixed-position/

似乎不再支持表达式 http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

所以我建议删除“位置：固定”并使其首先在 IE9 桌面上工作，因为在 WP7 中调试 html 没有简单的方法。看来您还必须继续使用其他 js 才能在 WP7 中获得固定页脚。

于 2012-06-29T00:14:42.743 回答
0

这是修复页脚的解决方案：

HTML：

<div class="header">
  Website Header
</div>
<div class="content">
  <p>
    A Solution for fixing footer section on webpage. it works every where even with mobile application too.
    blah....blah...blah....blah...blah....blah.... blah....blah... ... blah....blah.... ....blah....blah ...blah....blah ....blah....blah .... blah....blah..... blah....blah... blah....blah...blah....blah..!! 
  </p>
</div>
<div class="footer">
  Fixed Footer is copyright&copy;2012
</div>

CSS：

.header{
  width:90%;
  height:15%;
  background-color:#152087;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:#a7a575;
  vertical-align:middle;
  padding:5px;
  margin:0px;
}
.content{
  margin:0px;
  font-size:16px;
  height:70%;
  overflow:scroll;
}
.footer{
  position:fixed;

  z-index:999;
  width:90%;
  clear:both;

  text-align:center;
  height: 50px;
  bottom:-20px;
  margin-top: -72px;
  /* value of footer height */
  margin-top: 0px !IE;
  /* for IE */
  vertical-align:middle;
  background-color:#152087;
  color:#a7a575;
  font-size:14px;


}

我也测试过垃圾箱，所以点击http://codebins.com/codes/home/4ldqpbv

于 2012-07-03T12:33:44.597 回答
0

您可能想查看 Windows 移动浏览器是否支持固定定位。您可能需要编写一些 javascript 来检查页面向下滚动的距离并相应地放置页脚。

于 2012-07-04T19:06:34.683 回答
0

如果您使用的是 jquery mobile，请将其添加到您的 css

.ui-page .ui-footer {
   position: absolute;
   bottom: 0;
   z-index: 2;
}
于 2012-07-04T09:18:27.997 回答
-1

您必须更改 windows phone 8 中所有 3 种分辨率的视口宽度

以下代码适用于 HTC windows phone 8x

在您的头部部分包含元标记。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

在您的头部部分包含以下样式

<style>
    @media screen and (min-width: 640px) and (max-width: 1024px) and (orientation:portrait) {
        @-ms-viewport { width: 50%; }        
    }
</style

您需要为适用于 windows phone 8 的所有 3 种分辨率编写此内容。您可能必须为更高 DPI 手机减小宽度，为更低 DPI 手机增加宽度。

诺基亚 lumia 920 的视口宽度约为 70-80%，诺基亚 Lumia 820 的视口宽度约为 85-95%。但是您需要找出这两款手机的最小宽度和最大宽度。

于 2013-08-01T07:18:47.187 回答