Html 带背景图像的粘性页脚

我在正文中有一个页脚，应该钉在页面底部（不是固定的，总是在页面上）。我认为这是一个叫做粘脚的问题。它似乎只出现在页面上的内容垂直跨度不大的页面上。但是，在某些页面上，页脚下方有空白，如下所示：

我已将背景设置为橙色，以便您可以看到页脚在此页面上的位置

在另一页上，它看起来像这样（正确：

我想知道如何解决这个问题，或者是否有更好的方法来设计页脚——我最初并没有写它

以下是body元素中的html：

<footer class="main-footer">
        <div class="container">
            <ul class="links">
                <li><a href="link1">stuff1</a></li>
                <li><a href="link2">stuff2</a></li>
                <li><a href="link3">stuff3</a></li>
                <li><a href="link4">stuff4</a></li>
            </ul>
        </div>
    </footer>

如果有帮助的话，我很乐意提供更多的信息

编辑：我已将其缩小到

页边距顶部

：

  .main-footer .links {
    padding: 0;
      margin-top: 100px;

---

这是导致问题的原因。但是，我无法删除上边距，因为它是在页面上垂直设置文本格式所必需的（屏幕截图中未显示）。我尝试了

溢出：自动；

此处，但尚未修复它。

为容器添加最小高度：

.container {
min-height: 1000px;
}

或者尝试使用以下命令将背景图像放置在底部：

.main-footer {
    background-position: bottom;
}

---

如果这不起作用，我们将需要一个完整的代码笔或到您网站的链接，以便我们可以检查代码。您提供给我们的代码是不够的。

.main footer.logged in

和

main footer.logged out

在顶部和底部都有30像素的填充。无法确定这是否与您的问题有关，请确定nd罪犯我需要查看你的网站。

不幸的是，这并没有为我解决问题。我已经在我的帖子中添加了更多信息，希望它能有所帮助。由于我无法与你共享实际的网站，因为它非常大，有什么我可以提供的吗？不幸的是，这并没有为我解决问题。我已经在我的网页中添加了更多信息ost希望它能有所帮助。由于我无法与您共享实际的站点，因为它相当大，所以我还可以提供其他内容吗。

.main-footer {
    background-position: bottom;
}