为什么页脚不在底部

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;
}

这似乎在一开始就有效。然后我进入了一个内容超过视口高度的阶段，那就是事情停止了。

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

但是如果你看this，页脚就在视口的底部。 我知道这是一个简单的修复，但我无法弄明白。 有人可以帮我一把。

Answer 1

您希望页脚粘贴在页面底部，除非body上的内容足够大以至于滚动后显示？

如果是这样，您应该在您的正文标记上设置height: auto;，因此如果它在100%规则上设置超过min-height，则会考虑并将页脚推向底部

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

Answer 2

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