css - 页脚底部 CSS

Question

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

但是，当浏览器窗口最小化使得视口(viewport)小于内容区域，并且页面可滚动时，页脚将停留在页面中间而不是内容下方。一旦用户滚动，页脚就会停留在内容框的中间，就像这个截图:

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

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

Answer 1

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

1) 设置*为border-box:

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

2) 将页脚设置为 position:absolute，固定高度:

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

3) 将 html、body 和您的容器设置为 height:100%、min-height: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 时，必须在父元素上声明 position 而非 static 以使子元素位置相对于父元素，否则它将是 DOM 树中位置不是 static 的第一个父元素静态(在这种情况下，它只是窗口)。