ansaurus

Question

Css background layers and 100% height div's

Answer 1

A:

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.

Kyle Sevenoaks 2010-04-14 07:42:08

This is not my problem, please see the edit :)

Znarkus 2010-04-14 11:38:06

Do you have a live example we can take a look at?

Kyle Sevenoaks 2010-04-14 12:10:36

Answer 2

A:

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.

Simeon 2010-04-14 07:42:09

This is not my problem, please see the edit :)

Znarkus 2010-04-14 11:38:41

Answer 3

+1 A:

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 :)

S.gfx 2010-04-14 12:30:55

ansaurus

tags:

views:

answers:

Css background layers and 100% height div's

related questions