Question

如果您在移动电话上查看Chrome移动版中的my website并向任意方向滚动，则页脚将无法保留。对原因或解决方案有任何想法吗？

页脚的CSS代码如下所示：

#footer{
    width:100%;
    height:auto;

    filter:...;

    margin:0;
    padding:0;

    position:fixed;
    bottom:0;

    z-index:3000;
}

页脚的最初显示部分是＃pull2，具有以下CSS属性：

#pull2 {

    width: 100%;

    display: block;
    position:static;
    float:none;

    padding-left:10px;

    z-index:0;

    background: ...;
    background-position:...;
    cursor:pointer;

}

#pull2 p{

    line-height: 40px;
    margin:0;

}

Answer 1

尝试添加;

-webkit-backface-visibility: hidden;

position: fixed。

<强>价：

Easy CSS fix for fixed positioning
Position fixed not working in mobile browser

或者你可以用jQuery实现这个目的

<强> Working Fiddle

$(document).ready(function () {

    var winHeight = $(window).height();

    $(window).scroll(function () {
        $("#footer").css("top", $(window).scrollTop() + (winHeight-30) + "px");
    });

});

Answer 2

除了-webkit-backface-visibility: hidden技巧之外，如果元素大于页面似乎也会导致position: fixed出现问题（根据this question）。将<meta name="viewport" content="user-scalable=no">添加到您的<head>代码中也可能值得。{/ p>

位置：Chrome Mobile中的固定滑动错误

2 个答案: