页脚的绝对定位不起作用 [英] Absolute Positioning with Footer not working

问题描述

我不知道该如何解决. 将内容放在适当的位置:相对将使底部的0px无效，并且还将由于内容不足而在无法容纳整个高度的页面上创建大量的空白.

I have no idea how to fix this. Putting things on position: relative will null out the bottom: 0px, and will also create tons of white space on pages that don't fit the entire height due to lack of content.

将其置于绝对位置会使它覆盖确实具有足够长的内容以生成滚动条的页面内容.

Putting it on absolute makes it cover content of pages that do have content long enough to generate a scroll bar.

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

这应该工作正常吗?由于某种原因，事实并非如此.是Wordpress吗?以前从未遇到过这个问题，我已经解决了很多可能造成此问题的问题.

This should be working right? For some reason it just doesn't. Is it Wordpress? Never had this problem before and I have already gone through and cleaned up a lot of issues that may have caused it.

愚蠢的我...我忘记了这里的html. 现在它什么也没有，所以只是:

Silly me... I forgot the html here. Right now it has nothing in it so it is just:

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

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

I have it like that just to test it. To see what is happening you can visit it here: http://www.yenrac.net/theme

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

I hope that helps clarify some things.

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

I have also created this theme from scratch.

推荐答案

如果我正确回答了您的问题，那么应该可以:

If I got your question right, this should work:

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

这篇关于页脚的绝对定位不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！