html - 带有背景图片的粘性页脚

Question

我在正文中有一个页脚，应该固定在页面底部(不是固定的，总是在页面上)。我认为这称为粘性页脚。它似乎只发生在页面内容垂直跨度不是很远的页面上。然而，在某些页面上，页脚下方有一段空白，如下所示:

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

在另一个页面上，它看起来像这样(正确:

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

这是 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>

请注意，正文是使用 @RenderBody() 渲染的，页脚紧随其后。

这是 CSS:

.main-footer {

    background-image: url("images/footer-background.png");
    background-size: cover;
    background-position: initial;
    background-repeat: no-repeat;
    background-color: #ffffff;
    z-index: 10;
    padding-top: 2%;
    left: 0;
    color: #fff;
    text-align: right;
    height:190px;
    bottom:0;
}


  .main-footer .links {
    padding: 0;
      margin-top: 100px;
    list-style: none; }
    .main-footer .links li {
      display: inline-block; }
      @media only screen and (max-width: 768px) {
        .main-footer .links li {
          display: block;
          margin-bottom: 5px; } }
      .main-footer .links li:not(:last-child) {
        margin-right: 15px; }
  .main-footer a {
    color: inherit;
    font-weight: 200; }
  .main-footer.logged-in {
    position: static;
    background: #fff;
    padding: 30px 0;
    border-top: 1px solid #D8D8D8; }
    @media only screen and (max-width: 1040px) {
      .main-footer.logged-in {
        margin-top: 0; } }
    .main-footer.logged-in a, .main-footer.logged-in * {
      color: #999999; }
  .main-footer.logged-out {
    position: static;
    background: #fff;
    padding: 30px 0;
    border-top: 1px solid #D8D8D8; }
    @media only screen and (max-width: 1040px) {
      .main-footer.logged-out {
        margin-top: 0; } }
    .main-footer.logged-out a, .main-footer.logged-in * {
      color: #999999; }

body.content-tall .main-footer {
  position: relative;
  bottom: auto;
  margin-top: 30px; }

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

编辑:我已将其缩小到 margin-top 中:

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

这是导致问题的原因。但是，我无法删除上边距，因为它需要在页面上垂直格式化文本(屏幕截图中未显示)。我在这里尝试了 overflow: auto; 但没有修复它。

Answer 1

为您的容器添加一个最小高度:

.container {
min-height: 1000px;
}

或者尝试将背景图片放在底部:

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

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