Question

我正在使用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;
    }

Answer 1

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

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

所以我建议首先删除'position：fixed'并使其在IE9桌面上工作，因为在WP7中没有简单的方法来调试html。似乎你还需要继续使用额外的js来获得WP7中的固定页脚。

Answer 2

以下是修复页脚的解决方案：

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

Answer 3

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

.ui-page .ui-footer {
   position: absolute;
   bottom: 0;
   z-index: 2;
}

Answer 4

您可能希望了解Windows移动浏览器是否支持固定定位。您可能必须编写一些javascript来检查页面滚动的距离并相应地放置页脚。

Answer 5

您必须更改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％。但是你需要找出这两款手机的最小宽度和最大宽度。

页脚没有修复

5 个答案: