Css background layers and 100% height div's_问答_开发者

Css background layers and 100% height div's

开发者 https://www.devze.com 2022-12-27 07:46 出处：网络

Imagine the following code. <body id=\"first_bg_layer\"> <div id=\"second_bg_layer\"> <div id=\"third_bg_layer\">

Imagine the following code.

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

Each layer has a different background that is static/repeated to achieve the desired effect. I need all layers to fill up the screen, otherwise the bac开发者_开发知识库kground will be broken. The background is split in layers to minimize the image sizes.

Setting min-height to 100% doesn't work for various reasons. Is there any way to do this?

Edit: If I set #second_bg_layer to height:100% and #third_bg_layer to min-height:100%, that works. But then the #second_bg_layer is locked to 100%, and will not be expanded more.

What I want to do is to set the min-height on both div's, or some other solution.

Is a trick I read sometime ago, and applied as seen bellow, if I recall well... As said just above by others for the first part, I'd set :

html,html body {height:100%;}

Then, a div containing all content. A sort of wrapper if you want to call it so.

...wrapper div to which I'd set {height:100%;min-height: 100%;} In its class or id.

But sadly IE does not support min-height, nor height:auto, so...

just set first the IE case line: {height: 100%;}

and then the css that will apply to other browsers:

html>body whatever_the_div_class {height: auto;min-height: 100%;}

Finally, do a footer div to put it outside this wrapper div, just after it, to which css properties you will add:

height 1%; clear:both (the 1% is like often happens, IE needs some "space" or will do weird things)

Well, let's hope it helps :)

Did you set the HTML and BODY height to 100% with 0 margins? If not, do that, if so, make sure your div elements are positioned correctly.

If you just aren't getting a full width and height out of the body area, then maybe what you are asking for is this:

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

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

If its not, I'm not sure what you are having trouble with, but a background-image cannot be displayed outside of its selected element. If you want to differ the background layer from the layer itself then I would suggest using an additional div that has width/height: 100%; position: absolute; top/left: 0; and background: url(...); to hold the background image.