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

Question

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

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

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

Answer 2

请尝试以下css

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

<div class='footer'>
</div>

Answer 3

好吧，我怀疑它是 Wordpress ...除非您使用的是预制主题（或类似的主题）。不看 HTML 就很难看出你做了什么。但无论如何，我认为这可能是问题所在：

您 select 编辑了 class 为“footer”的页脚元素。我将继续进行有根据的猜测，您的意思是 select footer 元素的名称（ 不是 class） .所以也许这只是一个小小的修复（即删除 CSS 中页脚前的“.”）：

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

Answer 4

只需将此添加到您的 css：

body {
    margin: 0;
    padding: 0;
    background: #efefef;
    font-family: 'Lato', serif;
    padding-bottom: 174px; //add this line - height of footer + margin from content
}

例如，我从内容中添加了 24px 的边距。最好将此添加到 css:

* {
  box-sizing: border-box;
}

或仅针对 body

body {
  box-sizing: border-box;
}

因此，由于您添加的填充物不会增加您的身高，因此您变得不必要scroll-bars。

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

Absolute Positioning with Footer not working

html

css

wordpress

position

footer