html - 带页脚的绝对定位不起作用

Question

我不知道如何解决这个问题。 将内容放在 position: relative 将使 bottom: 0px 无效，并且还会在由于缺少内容而不适合整个高度的页面上创建大量空白。

将其设置为绝对值使其覆盖那些内容足够长以生成滚动条的页面内容。

.footer {
  width: 100%;
  height: 150px;
  background: #3167b1;
  position: absolute;
  bottom: 0px;
}

这应该有效吧？出于某种原因，它只是没有。是WordPress吗？以前从未遇到过这个问题，我已经解决并清理了很多可能导致它的问题。

编辑: 傻我...我忘了这里的 html。 现在它里面什么都没有，所以它只是:

<div class="footer"></div>

我有这样的东西只是为了测试它。 要查看发生了什么，您可以在此处访问它: http://www.yenrac.net/theme

我希望这有助于澄清一些事情。

我也从头开始创建了这个主题。

Answer 1

如果我答对了你的问题，这应该可行:

http://jsfiddle.net/9qq1dtuf/

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 170px;
}
.footer {
    width: 100%;
    height: 150px;
    background: #3167b1;
    position: absolute;
    bottom: 0px; left: 0;
}