0

想象一下下面的代码。

<body id="first_bg_layer">
  <div id="second_bg_layer">
    <div id="third_bg_layer">
    </div>
  </div>
</div>

每一层都有不同的背景，这些背景是静态的/重复的，以达到预期的效果。我需要所有图层填满屏幕，否则背景会被破坏。背景被分成几层以最小化图像尺寸。

由于各种原因，将 min-height 设置为 100% 不起作用。有没有办法做到这一点？

编辑：如果我将#second_bg_layer 设置为height:100% 并将#third_bg_layer 设置为min-height:100%，则可以。但随后#second_bg_layer 被锁定为100%，不会再扩大。

我想要做的是在两个 div 或其他解决方案上设置最小高度。

4

3 回答 3

1

是我前段时间读过的一个技巧，如果我记得清楚的话，如下所示应用......正如其他人在第一部分上面所说的那样，我会设置：

html,html 正文 {高度:100%;}

然后，一个包含所有内容的 div。如果你想这样称呼它，是一种包装器。

...包装器 div 我在其类或 id 中设置 {height:100%;min-height: 100%;}。

但遗憾的是 IE 不支持最小高度，也不支持高度：自动，所以...

只需先设置 IE 案例行：{height: 100%;}

然后是适用于其他浏览器的 css：

html>bodywhat_the_div_class {高度：自动；最小高度：100%；}

最后，做一个页脚 div 将它放在这个包装 div 之外，就在它之后，你将添加到其中的 css 属性：

高度 1%；clear:both（这 1% 就像经常发生的那样，IE 需要一些“空间”或者会做一些奇怪的事情）

好吧，希望它有所帮助:)

于 2010-04-14T12:30:55.650 回答
0

您是否将 HTML 和 BODY 高度设置为 100%，边距为 0？如果没有，请执行此操作，如果是，请确保您的 div 元素定位正确。

于 2010-04-14T07:42:08.377 回答
0

如果您只是没有从身体区域获得完整的宽度和高度，那么您所要求的可能是：

html, body {
    height: 100%; width: 100%;
}

/* And perhaps adding this if you're not using any reset CSS */
html, body {
    margin: 0; padding: 0;
}

如果不是，我不确定您遇到了什么问题，但背景图像无法显示在其选定元素之外。如果您想将背景图层与图层本身区分开来，那么我建议您使用具有宽度/高度的附加 div: 100%; 位置：绝对；上/左：0；和背景： url(...); 保存背景图像。

于 2010-04-14T07:42:09.153 回答