页脚无法固定

Question

我正在测试我的移动应用程序，使用Windows Mobile操作系统。我在页脚部分遇到了一些问题。问题是关于页脚固定的。当我滚动内容时，页脚也跟着上移。但在所有浏览器和除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;
    } 

- Nidheesh

---

移动版IE是否支持表达式？我建议避免使用它们。试过用JavaScript解决方案了吗？ - Christian

不要使用CSS hack、负边距等技巧。这些东西会使情况变得更糟，而不是更好。试图设计尽可能简单的布局和CSS规则。尝试发现哪些设备不支持哪些CSS规则。 - Václav Dajbych

@Bli_n：我不太明白你的问题。对于position:absolute属性，“它应该相对于其第一个定位祖先元素定位”。 - xan

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中的固定页脚。

- Sergei Grebnov

Answer 2

你可能需要查看Windows Mobile浏览器是否支持固定定位。你可能需要编写一些JavaScript代码来检查页面滚动的距离，并相应地放置页脚。

- andyzinsser

Answer 3

这是解决页脚问题的方法：

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;


}

我也在 bins 上进行了测试，所以请点击http://codebins.com/codes/home/4ldqpbv。

- gaurang171

---

如果标题高度需要以像素为单位设置，而不是百分比呢？ - andreszs

Answer 4

如果您正在使用jQuery Mobile，请将此代码添加到您的CSS中。

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

- CognitiveDesire

Answer 5

你需要更改 Windows Phone 8 中所有三个可用分辨率的视口宽度

以下代码适用于 HTC Windows Phone 8X

在 head 部分包含 meta 标签。

<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 的所有三种分辨率编写此代码。您可能需要在高 DPI 手机上减小宽度，在低 DPI 手机上增加宽度。

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

- Pravesh Pesswani

---

这并不能帮助在WP8 Web应用程序中固定CSS元素。 - andreszs