html - 为什么页脚不在底部

Question

我有一个正在处理的网站。我想让页脚贴在页面底部。所以我遵循了一个简单的指南，基本上是这样做的:

html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    padding-bottom: $footer-height + $footer-margin-top;
}

.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: $footer-height;
}

这似乎在一开始就奏效了。然后我到了一个内容超过视口(viewport)高度的阶段，这时一切都停止了。

如果你看this您可以看到页脚位于页面底部。

但是如果你看this ，页脚位于视口(viewport)的底部。我知道这是一个简单的修复，但我无法弄清楚。有人可以帮我一下吗。

Answer 1

除非 body 上的内容，否则您希望页脚固定在页面底部是否足够大以致于在您滚动后显示？

如果是这样，你应该设置height: auto;在你的 body 标签上，所以如果它超过 100%设置在你的 min-height 上规则，它正在考虑并将页脚推向底部。

如果这是您的预期行为，请告诉我。