为什么我的页脚下面有元素？

Question

我有一个新网站，我正在尝试创建一个始终显示在屏幕上的页脚。我已成功完成，但帖子仍显示在下方，如此处所示。

这就是我想要的样子（红色是背景）

这是我当前的页脚代码..

CSS

#contactLinks {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 35px 0px 35px 40px;
    background-color: rgb(43, 43, 43);
    width: 100%;
}

#contactLinks a {
    color: #808080;
    text-decoration: none;
    margin: 0px 30px 0px 0px;
}

HTML

<div id="contactLinks">
  <a href="mailto:me@nathfreder.website">Contact</a>
  <a href="https://github.com/nathfreder" target="_blank">GitHub</a>
</div>

Answer 1

你的页脚有 margin: 35px 0 35px 40px 这意味着

margin-top: 35px;
margin-right: 0;
margin-bottom: 35px;
margin-left: 40px;

应该是margin: 0;

Answer 2

您的页脚有 35 像素的底边距，这会导致与底部的距离。只需将 that/set 删除为 0 (margin: 35px 0px 0px 40px;).

Answer 3

如果您不想显示这些帖子，您可以尝试增加页脚元素的 padding-bottom，这样它们在您的页脚下就看不到了。这将确保页脚元素保持在您想要的位置（如果您将底部边距设置为 35px，希望它们高一点）

否则只删除 35px 底部边距。

或

如果您希望页脚下的元素显示为红色，您可能需要添加另一个 <div> 并将 CSS 属性设置为：

background-color:red;
opacity: 0.5; //if you want to make it transparent.
left: 0;
bottom: 0;
//and set the padding accordingly

为什么我的页脚下面有元素？

Why does my footer have elements under it?

html

css

footer