Question

我有一个奇怪的页脚问题。

http://jsfiddle.net/YGAvd/

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

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

Answer 1

在页脚CSS规则中更改＆＃39; position：absolute;＆＃39;到＆＃39;位置：固定;＆＃39;

你可能还需要和其他几个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;
}

Answer 2

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

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

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%;
}

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

浏览器底部的页脚除了滚动时

2 个答案: