css页脚不显示在页面底部

Question

我正在使用这个css作为我的页脚：

.footer {
    width:100%;
    background:#666666;
    clear:both;
    color:#FFFFFF;
}

.footer-container {
    display:block;
    width:80%;
    margin: 0 auto;
    overflow: hidden;
}

但我无法在页面底部显示页脚

这是一个小提琴：http://jsfiddle.net/z2pvC/

Answer 1

您所描述的内容称为粘性页脚。请参考这些资源来解决您的问题：

Fixed your jsFiddle here

.

CSS Sticky Footer * 首选

Ryan Fait's explanation

Chris Coyer's solution

---

使用CSS Sticky Footer解决方案修复了您的jsFiddle。

Answer 2

我要么将页脚绝对放在页面的末尾，要么使用position: fixed使其粘滞。

这是一个更新的JSFiddle，代表第一个选项：http://jsfiddle.net/z2pvC/2/

相关页脚CSS：

.footer {
width:100%;
background:#666666;
clear:both;
color:#FFFFFF;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: 20px;
}