带有 Ryan 的粘滞页脚的移动浏览器错误

Question

首先，我认为 Ryan 的 Sticky Footer 很棒。非常兼容易于实现。如果您在http://ryanfait.com/html5-sticky-footer/987654321@之前没有见过/听说过它，它就在这里

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

我的问题是。我已经实现了它并且它工作得很好，但是在我的移动浏览器上存在一个错误。实施 Ryan 的 Sticky Footer 后，当我向下滚动时，移动浏览器 url 栏不会自动隐藏，它只是停留在那里，占用宝贵的空间。不好。

所以我已将其缩小到 100% 的身高。当我删除它时，移动浏览器 url 栏会隐藏。伟大的。但是页脚不粘。

以前有人遇到过这种情况吗？有解决办法吗？或者说 Ryan 的 Sticky Footer 现在有缺陷:(

Answer 1

当 body 的高度直接设置为 100% 时，它不能再扩展到其内容的大小。改为设置最小高度。

html {
   height: 100%;
}

body {
   min-height: 100%;
}

看到这个答案：Link