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

【问题标题】：Absolute Positioning with Footer not working带页脚的绝对定位不起作用
【发布时间】：2016-01-21 14:13:14
【问题描述】：

我不知道如何解决这个问题。将东西放在位置：relative 将使底部：0px 无效，并且还会在由于缺少内容而无法适应整个高度的页面上创建大量空白。

将其设置为绝对可以覆盖具有足够长的内容以生成滚动条的页面内容。

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

这应该可以正常工作吗？出于某种原因，它只是没有。是WordPress吗？以前从来没有遇到过这个问题，我已经解决了很多可能导致它的问题。

编辑：愚蠢的我......我忘记了这里的html。现在它什么都没有，所以它只是：

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

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

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

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

【问题讨论】：

请同时发布您的 html。否则我猜你需要为 body 容器指定 margin-bottom 等于或大于你的页脚高度。
它实际上正在正常工作。问题是当 div 是绝对的时，它们会出现在正常的正文内容之上。

标签： html css wordpress position footer

【解决方案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;
}

【讨论】：

那种工作。它把它带到了页面的底部，但是它仍然覆盖了内容并且似乎不喜欢页边距顶部或底部。编辑：没关系，即使我之前尝试过，它也能完美运行。猜猜熬夜会导致这些事情>_>谢谢！

【解决方案2】：

请试试下面的css

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

对不起，我忘了澄清 html。目前它只是一个普通的
用于测试目的。

【解决方案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
}

作为示例，我从内容中添加了 24 像素的边距。如果您将其添加到您的 css 中，那将是最好的：

* {
  box-sizing: border-box;
}

或者只是为了身体

body {
  box-sizing: border-box;
}

因此，由于您添加的填充不会增加您的高度，并且您会得到不必要的滚动条。

【讨论】：