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

Answer 2

请试试下面的css

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

您选择了具有“footer”类的页脚元素。我将继续进行一个有根据的猜测，你打算用它的名字选择footer元素（不是它的类）。所以也许它只是一个小小的小小的修复（即删除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 {
  box-sizing: border-box;
}

因此，添加的填充不会增加你的身高，你会得到不必要的滚动条。

页脚无效的绝对定位

4 个答案: