背景图像比封闭的 div 长答案

【问题标题】：Background image is longer than the enclosing div背景图像比封闭的 div 长
【发布时间】：2011-01-25 21:15:18
【问题描述】：

在客户网站上，我必须仅为页面的包含区域（其真实内容部分）添加背景图片。

问题是，如果内容足够短，那么图像就会被剪裁。怎么可能让图像完全可见？我曾尝试添加“溢出”CSS 属性，但不幸的是它对我没有帮助。

这是我必须处理的网站示例：http://www.sfp-pensioen.nl/werknemer/welkom 背景图片位于 id="content" 的 div 元素上。

在我发送的特定链接上它不是问题，因为内容足够长，但是如果您使用 firebug 删除元素，那么问题就会变得明显。

ps：必须支持IE6。

【问题讨论】：

【解决方案1】：

如果您知道#sidebar 或 #main 将始终具有与背景图像相同或更大的视觉高度，那么您只需将背景图像添加到：

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

而不是#content上的时刻

【讨论】：

【解决方案2】：

按照格雷厄姆的回答：

ie6 中的“height”在其他浏览器中的作用类似于“min-height”。

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

上面的示例将提供 50 像素的跨浏览器最小高度。 ie6 将读取“_height”，而其他浏览器不会。如果您不破解，请使用条件语句。

丰富

【讨论】：

【解决方案3】：

你可以给 id #content 一个height

或

将background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; 应用于#mainContent 而不是#content

【讨论】：

【解决方案4】：

您想要的是 100% 的高度，您可以通过以下方式实现这一目标。

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

您需要最小高度，而主体需要一个高度，因此主体的每个子元素都将遵循规则。

也可以通过添加 min-height: 100%;所有 css 规则都可以解决任何 A 级浏览器的所有问题。

【讨论】：

【解决方案5】：

overflow 属性控制当 content 太大而无法容纳时 div 会发生什么 - 如果您有一个固定大小的 div，其中某些内容可能会溢出，您通常需要 @ 987654322@ 选项。 overflow 对背景图片没有影响。

对于您的情况，听起来您想在内容 div 上指定 min-height。请注意，IE6 等较旧的浏览器不支持此功能，您可能关心也可能不关心。不过，有很多方法可以解决这个问题。

【讨论】：

【解决方案6】：

overflow 为background-images 是不可能的，但您可以为content 设置一个min-height （或将图像设置在另一个div 中，并设置较低的z-index 并将其定位到出现在该位置你想要 - 但这是一个非常糟糕的解决方案）

【讨论】：