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

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