css - 页面底部的页脚 CSS

Question

在这个小提琴中，我想创建一个位于页面底部的页脚，如下图所示：

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

页脚滚动

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

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

score 0 · Accepted Answer

有很多尝试通过 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 及以下版本......好吧，这非常棘手，如果你愿意，你可以用谷歌搜索。:) 一些注意事项：

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

1 回答 1