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，以及相对位置。

fiddle can be seen here。

Answer 2

从height课程中删除footer媒体资源。

#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;
}

粘滞的页脚并非完全位于移动设备的底部

2 个答案: