Question

想象一下以下代码。

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

每个图层都有不同的背景，静态/重复，以达到预期的效果。我需要所有图层填满屏幕，否则背景将被破坏。背景分层，以最小化图像大小。

将min-height设置为100％不会因各种原因而起作用。有没有办法做到这一点？

编辑：如果我将#second_bg_layer设置为高度：100％，将#third_bg_layer设置为min-height：100％，则可行。但是#second_bg_layer被锁定为100％，并且不会扩展得更多。

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

Answer 1

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

html，html body {height：100％;}

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

...我设置的包装div {height：100％; min-height：100％;} 在其班级或身份。

但遗憾的是IE不支持min-height，也不支持height：auto，所以......

首先设置IE案例行：{height：100％;}

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

html＆gt; body whatever_the_div_class {height：auto; min-height：100％;}

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

身高1％;明确：既（1％经常发生，IE需要一些“空间”或会做奇怪的事情）

好吧，让我们希望它有所帮助：）

Answer 2

您是否将HTML和BODY高度设置为100％且边距为0？如果没有，那么这样做，如果是这样，请确保你的div元素正确定位。

Answer 3

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

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的div：100％;位置：绝对;上/下：0;和背景：url（...）;保持背景图像。

Css背景图层和100％高度div

3 个答案: