html - Ryan 的粘性页脚的移动浏览器错误

Question

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

* {
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% 的高度。当我删除它时，移动浏览器的网址栏会隐藏。伟大的。但页脚不粘。

有没有人遇到过这个？有解决办法吗？或者 Ryan 的 Sticky Footer 现在有缺陷:(

Answer 1

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

html {
   height: 100%;
}

body {
   min-height: 100%;
}

查看此答案:Link