粘性页脚不完全在移动设备的底部

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

我已经为你修改了一些代码。我认为问题在于身体不是最大高度。因此，页脚可能会粘在正文的底部，它会停在那些圆圈附近的某个地方。

我更改的代码如下：

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在身体上，以及一个相对位置。

该小提琴可以在这里看到。