full height div using css?

still need help.

okay so ive got a very basic idea so far put together, but what i cant manage to do is get my main div to stretch to full height. i want the page to fill the browsers height even if there is not enough content inside of the main div.

i have searched for this, and the only answer ive found is to set html, body { height:100%; } and the div at 100% as well, which KIND OF works, but i think it makes it the FULL height of the page, so if you have other divs like a header and footer (which i do) it makes it go MORE than the full height of the page.

im killing myself over this, can someone please shed some light on the subject? it would be greatly appreciated

#382932

what about:

give html,body 100%

give header 5%

give main div 90%

give footer 5%

remember you may get different results in Quirks and Standard modes

#383052

i dont want percentages other than the main div. i want the header and footer to be a static height, and the main div to be "elastic" and spring to fit the entire blank space.

#383143

have the header and footer absolute, top: 0px and bottom: 0px respectively, and the main div with height: 100%

#383195

have the header and footer absolute, top: 0px and bottom: 0px respectively, and the main div with height: 100%

... and use some kind of top and bottom margins inside your main div, so that its content is not covered by the header and footer.

#383467

... and use some kind of top and bottom margins inside your main div, so that its content is not covered by the header and footer.

Shouldn't need to, just need to float: left/right, I think.

Example: (mostly for myself, I think better when do this..)

EDIT: I came up with better thought out idea...

#383625

Perhaps try playing with the z-index property? I'm not sure how well it's supported but you could just have a header and footer inside the main body (whose height is set to 100%) with a higher z-index...

-NC

#383649

I'm pretty sure z-index only works with absolutely postioned things.

#383662

Nope, as long as it's specified as anything other than auto (i.e relative will work too), it's okay...

http://www.w3schools.com/css/pr_pos_z-index.asp

It was just an idea though, and never having used it myself I don't know if it will work.

-NC

#383666

Nope, as long as it's specified as anything other than auto (i.e relative will work too), it's okay...

http://www.w3schools.com/css/pr_pos_z-index.asp

It was just an idea though, and never having used it myself I don't know if it will work.

-NC

hmm... I'll have to try it some time then.

@riot

I've got an idea for the header/footer issue though.

You could have header/footer width be 100%.

You could have those be absolutely positioned.

And just have the main with float left and relative.

#footer {

position: absolute;

bottom: 0px;

width: 100%

}

#main {

position: relative;

height: 100%;

float: left;

width: 100%;

}

#header {

position: relative;

top: 0px;

width: 100%

}

#383670

as long is

#someDiv {

margin:0 auto;

}

#383961

thanks for the help guys. im going to try a few of your ideas, as well as some extra info i have found myself. if i have success i will report back with thanks for all

#384096

ive looked high and low for a solution to this before. unfortunately there just isnt a true way to control the height of a div with css (yet). its similar to having equal-height columns...you have to cheat it with javascript or a background image.

#384202

yeah i think ive come to the conclusion that cheating with a background image is the easiest way to achieve this effect.

#384203

Stevie provided me with a very clear hack for equal-height columns:

http://www.positioniseverything.net/articl...out/equalheight

There are some bugs, but they're quite clearly discussed.

-NC

#384249