另一个不会停留在底部的页脚

Question

我知道之前已经多次询问这个问题而且我正在疯狂地尝试解决这个问题，因为我知道我只是在忽视这个问题。

我的页脚未放置在页面底部，内容不会超出滚动需要。任何内容有限的页面页脚在页脚div和页面的实际底部之下都有很大的余量。

我的当前html为

<footer class="site-footer">
    <div class="page-wrapper">
    </div>
</footer>

和我的css为

.site-footer {
  position: relative;
  width: 100%;
  margin: 10em auto 0;
  background: white;
  padding: 1.5em;
  height: 90px;
  margin-bottom: -90px;
  bottom: 0;
  text-align: center;
}

Answer 1

将padding-bottom: 0设为.page并将position: relative替换为position: absolute

.page {
  padding-bottom: 0;
}

.site-footer {
  position: absolute;
  margin: 0;
  bottom: 0;
  height: 90px;
  background-color: #fff;
  width: 100%;
  padding: 1.5em;
}

Answer 2

页脚不在底部，因为位置：相对位于页面内容底部的相对位置。

让它保持在我建议的每一页的底部：

position: absolute;
bottom: 0;
left: 0;
height: 90px;

等。

您可以在How to Keep the Footer Down

查看演示

Answer 3

我看到的唯一差距是当页面处于一定宽度（小于680像素的屏幕宽度）并且由此属性引起时：

.page-column {
  text-align: left !important;
  display: block !important;
  width: 100% !important;
  margin: 2em auto;
}

删除margin: 2em;，将删除差距。

Answer 4

您可能需要position: fixed：

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
}

这会将页脚div粘贴到视口的底部。

Answer 5

最简单的修复。

只需将其添加到CSS中即可。

body {
  padding-bottom: 0px !important;
}

你的CSS实际上并没有什么问题，只是在某个地方，你已经给你的身体元素添加了一些填充物，导致了这个问题。

<强>之前：

<强>后：