浏览器底部的页脚，除非我滚动答案

【问题标题】：Footer at bottom of browser except when I scroll浏览器底部的页脚，除非我滚动
【发布时间】：2012-04-06 10:33:38
【问题描述】：

我遇到了一个奇怪的页脚问题。

http://jsfiddle.net/YGAvd/

如果我扩大或缩小窗口，页面底部的云彩会粘在浏览器窗口的底部。但是当我向下滚动时，页脚会出现在页面中间。这在我的任何其他页面上都不是问题，因为在出现滚动条之前它们都适合 900x600 的窗口。

有没有办法让我的页脚即使在我滚动时也保持在窗口底部（因此它总是在内容下方）而不会弄乱共享 CSS 文档的所有其他页面的代码？

【问题讨论】：

标签： html css footer sticky-footer

【解决方案1】：

在页脚 CSS 规则中更改 'position: absolute;'到'位置：固定;'

您可能还需要玩一些其他的 def，但这很有效。

check it out

这是我最后的页脚规则

footer {
    position: fixed;
    color: black;
    width: 100%;
    height: 4.6em;
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
    background-repeat: repeat-x;
    background-color: e0e0e0;
    z-index: -999;
    overflow: hidden;
    bottom: 0px;
}

【讨论】：

【解决方案2】：

不要将背景图片放在页脚中......将其作为正文背景图片！

然后让你的body标签看起来像这样：

body {
    line-height: 1;
    overflow: auto;
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
    background-repeat: repeat-x;
    background-position:bottom center;
    background-attachment:fixed;
    background-color: #b1ceff;
    font: normal 95% Sathu, Verdana, Arial, Tahoma;
    text-align: center;
    height: 100%;
}

不要忘记从图片的页脚中删除代码。另外，请删除页脚中的背景颜色以避免出现任何问题。

【讨论】：