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

Posted 2023-05-08

【中文标题】当页面小于窗口时如何强制HTML背景到底部

【英文标题】：How to force HTML background to bottom when page is smaller than window

【发布时间】：2012-09-08 19:32:35

【问题描述】：

我有一个带有 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 无法正常工作。

感谢您的帮助！

【问题讨论】：

背景图片中的多张图片会在以下 Internet Explorer (9.0) 中产生问题

谢谢，但我可以解决。无论我使用 2 个背景图像还是 1..

，这个问题都存在

看起来您可能没有正确设置背景位置，它希望每个背景都有一个像“左上角”这样的参数。您可能应该为 background-position 设置的是“0 top, 0 bottom”

【参考方案1】：

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

html, body  min-height: 100%; 

DEMO

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

DEMO

【参考方案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;