html - 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 粘滞页脚*首选

瑞安法特的解释

Chris Coyer 的解决方案

---

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