粘性页脚属性不兼容移动设备

Question

我正在尝试创建一个随时出现在我网站底部的粘性页脚。它在桌面PC等和风景移动电话上都能很好地工作，但是在纵向模式下在手机（S4，iPhone等）上观看时，页脚出现在页面中间而不是底部。我已经尝试添加不同的视口元标记，并查找了可能的解决方案，但我真的没有得到任何地方 - 任何想法？

JSFiddle

CSS

* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -62px;
}

footer, .push {
height: 62px;
}

footer {
position: relative;
overflow: hidden;
min-width: 870px;
width: 100%;
}

HTML

<div class="wrapper">
    [... content ...]
    <div class="push"></div>
</div>
<footer>
    [... content ...]
</footer>

Answer 1

试试这个demo，或者你可以使用固定位置作为页脚。