页脚未修复

Question

我正在测试我的移动应用程序，Windows mobile.I页脚部分有一些问题。问题是关于页脚修复。当我滚动内容时，页脚也会起来。但是页脚在所有浏览器中都是固定的，包括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 - 之前和之后，芒果忽略固定的定位和渲染固定元素的位置是：静态。您测试的IE9桌面和其他浏览器支持position：fixed。 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中的固定页脚。

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的移动添加到您的css

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

Answer 4

你可能想看看windows mobile浏览器是否支持固定定位。您可能必须编写一些JavaScript来检查页面滚动的距离，并相应地放置页脚。

Answer 5

你必须改变视口宽度在Windows手机提供8

下面的代码会为HTC的Windows Phone工作的所有3米分辨率8X

包括在你的头部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手机8.所有3分辨率您可能必须降低幅度更高的DPI电话和增加宽度较小的DPI电话。

诺基亚lumia 920的视口宽度将在70-80％左右，诺基亚Lumia 820的视口宽度将在85-95％左右。但是你需要找出这两款手机的最小宽度和最大宽度。