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/

*/

我的问题是。我已经实现了它并且它很有效，但是在我的移动浏览器上有一个bug。随着Ryan的Sticky Footer实现，当我向下滚动时，移动浏览器URL栏不会自动隐藏，它只是停留在那里，占用了宝贵的空间。不好。

所以我把它缩小到100％的身高。当我删除它时，移动浏览器网址栏隐藏。大。但页脚并不粘。

有没有人遇到过这个？有修复吗？或者Ryan的Sticky Footer现在有缺陷:(

Answer 1

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

html {
   height: 100%;
}

body {
   min-height: 100%;
}

请参阅此答案：Link

Ryan的Sticky Footer的移动浏览器错误

1 个答案: