css - 背景图像比封闭的 div 长

Question

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

问题是，如果内容足够短，那么图像将被剪裁。怎么可能让图像完全可见？我曾尝试添加“溢出”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;到 #mainContent 而不是 #content

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

而不是现在的时刻#content

score 0 · Accepted Answer

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

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

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

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

6 回答 6