页脚底部CSS

Question

In this fiddle我想创建一个位于页面底部的页脚，如此屏幕截图所示：

但是，当浏览器窗口最小化以使视口小于内容区域并且页面可滚动时，页脚将停留在页面的中间而不是内容之下。用户滚动后，页脚将保留在内容框的中间，如此屏幕截图所示：

如果没有滚动条，如何创建一个停留在视口底部的页脚，但是当滚动条出现且内容位于视口之外时，它会停留在内容框的底部？

我在页脚上使用position:absolute; bottom:0;。我是否需要在内容框或页脚中添加声明？谢谢你的帮助！

Answer 1

有很多尝试通过CSS做到这一点，大多数是hacky解决方法，老实说它的方式更容易使用Javascript。但对于纯CSS，它通常是这样的：

1）将*设置为border-box：

* {
    -webkit-box-sizing:border-box;
    -moz-bos-sizing:border-box;
    box-sizing:border-box;
}

2）将页脚设置为绝对位置：固定高度：

#footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:40px;
}

3）将html，body和您的容器设置为高度：100％，最小高度：100％，并将容器位置设置为静态以外的容器，并将填充底部设置为无论你的页脚高度是+一点差距（如果你想）：

html,body,#container {
    height:100%;
    min-height:100%;
}

#container {
    position:relative;
    padding-bottom:50px;
}

对于IE8及以上版本，它应该能够很好地处理它。对于IE7及以下......好吧，这非常棘手，如果你愿意，你可以谷歌那个。 :)一些说明：

1. 需要box-sizing声明以确保100％的高度包括填充（否则它只是100％加上你给它的填充）。
2. 当在子元素上使用position：absolute时，必须在父元素上声明除static之外的位置，以使childs位置相对于父元素，否则它将是DOM树的第一个父元素，其位置不是static（在这种情况下，它只是窗口）。