Question

我有一个包含2个背景图片的页面，其中一个需要显示在页面的最底部。目前我已经实现了这样：

body {
    background-image: url('/cheri/image/background.png'), 
                      url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}

当页面内容高于浏览器窗口时，此工作正常，但如果页面内容较小，则在背景图像下方留下空的空白区域，如下图所示：

http://img198.imageshack.us/img198/4560/screenshot20120916at851.png

我试图将body设置为position：absolute，height：100％，但在滚动时它无法正确呈现。我还试图为背景图像创建一个单独的div并将其绝对定位到底部，但由于我对底部出现的某些元素有不同的位置属性，因此z-indexing无法正常工作。

感谢您的帮助！

Answer 1

在min-height: 100%和html上使用body：

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

DEMO

当您有足够的内容导致滚动时，它不会产生任何问题。

DEMO

Answer 2

也设置HTML元素：

html {
    background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}

当页面小于窗口时，如何强制HTML背景到底部

2 个答案: