html - 粘性页脚不完全位于移动设备的底部

Question

我目前正在构建一个带有页脚的网站，该页脚应该贴在底部，在我的桌面上(使用 chrome 浏览器)它工作正常，但是当我在移动设备上尝试该网站时，下面有一点间距页脚，我的问题是如何解决这个问题？我的网站位于:http://block-smash.com/beta我的代码如下:

<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<center>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
</center>
</div>
</div>
<div id="footer">
&copy; Mickael van Schie
</div>

这是我的 CSS:

html{
position: relative;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body{
background: rgb(230,230,220);
overflow-x: hidden;
margin: 0px;
}
#wrapper{
height: 100%;
width: 100%;
}
#header{
width: 100%;
height: 50%;
background: rgb(100,200,100);
}
#nav{
height: 125px;
margin-left: auto;
margin-right: auto;
margin-top: -62px;
}
#footer{
width: 100%;
height: 15px;
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
.circle{
height: 125px;
width: 125px;
border-radius: 90px;
background-color: white;
border: 5px solid rgb(70,130,70);
display: inline-block;
margin: 0px 40px 0px 40px;
position: relative;
}

我在网站上也有一些 jquery，但这对于页脚或页面中的任何高度都不是必需的。

Answer 1

我已经为您稍微修改了代码。我认为问题在于 body 不是最大高度。因此，页脚可能会粘在正文的底部，它会停在那些圆圈附近的某处。

我修改的代码如下:

html {
    position: relative;
    min-height: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
body {
    background: rgb(230, 230, 220);
    overflow-x: hidden;
    margin: 0px;
    position: relative;
    min-height: 100%;
    height: auto;
}

如您所见，我给 html 一个实体高度，并为主体添加了一个 height 和一个 min-height，如以及位置关系。

fiddle can be seen here .