页脚绝对定位不工作

我不知道如何解决这个问题。将事情放在位置上：相对将会使底部为零：0px，并且由于缺少内容，还会在不适合整个高度的页面上创建大量空白区域。页脚绝对定位不工作

把它放在绝对的地方使得它覆盖了内容足够长的页面来生成一个滚动条。

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

这应该是正确的？由于某种原因，它只是没有。它是Wordpress吗？以前从未遇到过这个问题，而且我已经完成并清理了很多可能导致问题的问题。

编辑：傻我...我忘了这里的HTML。现在它无关，在它，所以它仅仅是：

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

我必须这样说，这只是为了测试它。要看看发生了什么，你可以访问它在这里： http://www.yenrac.net/theme

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

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

来源

2015-10-22 user3634781

请同时发布您的html。否则，我猜你需要指定容器底部的容器底部等于或大于页脚高度。 – sdvnksv

它实际上正在工作。问题是，当div是绝对的时候，它们出现在正常人体内容的顶部。 – Lee

如果我收到了你的问题的权利，这应该工作：

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

来源

2015-10-22 10:58:23 sdvnksv

这种工作。它把它带到页面的底部，但它仍然覆盖内容，似乎不喜欢页边距或底部。编辑：没关系，即使我之前尝试过，这个工作完美。猜想熬夜可以导致这些事情> _> 谢谢！ – user3634781

请尝试波纹管CSS

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

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

来源

2015-10-22 11:13:04 Mitul

嗯，我怀疑它的WordPress的...除非你正在使用预制主题（或沿着这些行）。在看不到HTML的情况下很难看到你做了什么。但无论如何，继承人我认为可能是问题：

您已选择具有“footer”类的页脚元素。我打算继续前进，并做出有根据的猜测，即你打算选择名称为footer的元素（不是它的类）。因此，也许它只是一个小一点微小的片断修复（即除去在你的CSS页脚之前“”）：

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

来源

2015-10-22 11:13:11 James

对不起，我忘了澄清的HTML。目前只是用于测试目的的简单的

。 – user3634781

只需添加到您的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; 
}

所以当你添加了补不添加到你的身高，你会得到不必要的滚动条。

来源

2015-10-22 12:20:51

页脚绝对定位不工作

回答

相关问题