3

2 つの背景画像を含むページがあり、そのうちの 1 つはページの一番下に表示する必要があります。現在、私は次のように実装しています：

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

本文を position:absolute、height:100% に設定しようとしましたが、スクロールが存在する場合に正しくレンダリングされませんでした。また、背景画像用に別の div を作成し、絶対に下に配置しようとしましたが、下にあるいくつかの要素の位置プロパティが異なるため、z-indexing が正しく機能しませんでした。

助けてくれてありがとう！

4

2 に答える 2

9

min-height: 100%との両方htmlで使用body：

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

デモ

スクロールを引き起こすのに十分なコンテンツがある場合は、問題は発生しません。

デモ

于 2012-09-16T10:56:58.717 に答える
1

HTML 要素も設定します。

html {
    background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}
于 2012-09-16T06:14:34.107 に答える