Question

CSS：

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #E6E6E6;
}
#header {
    background-color: black;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
} 
#content {
    padding-bottom: 80px;
    text-align: center;
}
#footer {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: black;
    color: #898989;
}

我使用一种非常常见的方法将页脚保持在页面底部，而它只有一半可以工作。我通过一个博客了解到它，起初它确实非常有用，但是在某些时候编辑我的网站它已经破了。它显示了一小部分页脚div，而剩下的就在那里，你必须向下滚动才能看到它。

不滚动：http://i.imgur.com/lKH5Byc.png

滚动：http://i.imgur.com/GrGKpzm.png

我不知道我在这里失踪了什么，它只是不起作用。

编辑：所以我知道这是一个可怕的问题，我遗漏了很多东西，因为它是一个公司网站，我只是担心我所包含的内容。罪魁祸首原来是#header元素的边缘。删除那些使一切都像魅力一样。

Answer 1

所以我知道这是一个可怕的问题，我遗漏了很多东西，因为它是一个公司网站，我只是担心我所包含的内容。罪魁祸首原来是#header元素的边缘。删除那些使一切都像魅力一样。

Answer 2

我只更改了底部

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #E6E6E6;
}
#header {
    background-color: black;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
} 
#content {
    padding-bottom: 80px;
    text-align: center;
}
#footer {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: -100px;
    left: 0;
    background-color: black;
    color: #898989;
}

<div id="header">
.
</div>
<div id="content">
.
</div>
<div id="footer">
.
</div>

这有帮助吗？

页脚底部被剪掉的页脚

2 个答案: