页脚无法正常工作的绝对定位

Question

我不知道如何解决这个问题.将事物置于正确位置:相对将使底部无效: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;
}