页面底部的页脚 CSS答案

【问题标题】：Footer bottom of page CSS页面底部的页脚 CSS
【发布时间】：2013-09-13 06:30:54
【问题描述】：

In this fiddle我想创建一个留在页面底部的页脚，如下图所示：

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

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

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

【问题讨论】：

【解决方案1】：

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

1) 将* 设置为边框：

* {
    -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 和容器设置为 height:100%, min-height:100%, 将容器位置设置为静态以外的位置，并将 padding-bottom 设置为页脚高度+ 一点差距（如果你愿意的话）：

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

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

对于 IE8 及更高版本，这应该可以很好地处理它。对于 IE7 及以下版本......好吧，这非常棘手，如果你愿意，你可以用谷歌搜索。 :) 一些注意事项：

需要box-sizing 声明以确保 100% 的高度包括填充（否则它将只是 100% 加上您给它的填充）。
当在子元素上使用 position:absolute 时，必须在父元素上声明静态以外的位置，以便子元素的位置相对于父元素，否则它将是 DOM 树上的第一个父元素，位置不是静态的（在这种情况下，它只是窗口）。

【讨论】：