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

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

您的页脚底部边距为35px，导致底部距离。只需将其删除/将其设置为0（margin: 35px 0px 0px 40px;）。

Answer 3

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

或者只是删除35px的底部边距。

OR

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

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