css - 背景画像が囲んでいるdivよりも長い

Question

顧客のWebサイトでは、ページの含まれている領域（実際のコンテンツ部分）のみの背景画像を追加する必要があります。

問題は、コンテンツが十分に短い場合、画像がクリップされることです。画像を完全に表示するにはどうすればよいですか？「オーバーフロー」CSS属性を追加しようとしましたが、残念ながら役に立ちませんでした。

これが私が作業しなければならないウェブサイトの例です：http ：//www.sfp-pensioen.nl/werknemer/welkom背景画像はid="content"のdiv要素にあります。

私が送信している特定のリンクでは、コンテンツが十分に長いため問題にはなりませんが、firebugを使用して要素を削除すると、問題が明らかになります。

ps：IE6をサポートする必要があります。

score 3 · Accepted Answer

グラハムの答えに続いて：

ie6の「高さ」は、他のブラウザでは「最小の高さ」のように機能します。

min-height: 50px;
_height: 50px;

上記の例では、クロスブラウザの最小の高さは50pxになります。ie6は、他のブラウザでは読み取れない「_height」を読み取ります。ハッキングしない場合は、条件文を使用してください。

リッチ

score 3 · Accepted Answer

heightIDに＃contentを与えることができます

また

background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent;#contentの代わりに#mainContentに適用します

score 1 · Accepted Answer

overflowfor sは不可能ですが、 forをbackground-image設定することもできます（または、画像を下の別の画像に設定して、希望の場所に表示されるように絶対に配置しますが、これは非常に悪い解決策です）min-heightcontentdivz-index

score 1 · Accepted Answer

このoverflow属性は、コンテンツが大きすぎて収まらない場合にdivに何が起こるかを制御します。コンテンツがオーバーフローする可能性のある固定サイズのdivがある場合は、通常、このautoオプションが必要です。overflow背景画像には影響しません。

min-heightあなたの場合、コンテンツdivでaを指定したいようです。これはIE6のような古いブラウザではサポートされていないことに注意してください。IE6は気にするかもしれないし気にしないかもしれません。ただし、これを回避する方法はたくさんあります。

score 0 · Accepted Answer

あなたが望むのはあなたが以下でこれを達成することができる100％の高さです。

html {
    height: 100%;
}
body {
    height: 100%;
}
#content {
    height: 100%;
}

最小の高さが必要であり、ボディには高さが必要です。これにより、ボディのすべての子要素がルールに従います。

また、min-heightを追加することによって：100％; すべてのcssルールに準拠することで、グレードAのブラウザに関するすべての問題を解決できます。

score 0 · Accepted Answer

#sidebar または 常に背景画像と同じかそれ以上の視覚的な高さがあることがわかっている場合#mainは、背景画像を次の場所に追加するだけです。

.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}

それが瞬間である場所の代わりに#content

6 に答える 6