100% height

I have a footer and a header and a two column body using css.
The width is fixed at 700px. But how do I set the height to 100%, making the footer sitting right at the bottom of the browser and the body stretching 100% from top to bottom although its filled with minimum text?
Padding and Margin set to 0.

In your css

And for your container that holds the content between the header and the footer

Great, I'll try it out soon.

That might not work, its about the right code but its not working for me. Ill fix it up and repost.

Remember, 100% means 100% of the viewport, not the page size. In otherwords, the number of pixels in height the browser has when it opens the page. If your content goes longer and causes scroll bars, your "footer" will be stuck in the middle of the content somewhere assuming you're using absolute positioning. Relative positioning will give you quirky results.

I came across this some time ago, it's 100% CSS and it puts your footer at the bottom of all the content, regardless of the browser size etc. It works well.

http://www.themaninblue.com/experiment/footerStickAlt/

The difference between this and just simply putting a footer at the bottom of the page, is that if your content does not fill up the viewport, the footer will still be at the very bottom of the browser instead of just below the end of the content. Hope that makes sense.

CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself

Originally Posted by Hoorai CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself

...whats wrong with being "gay"?

gl on the code.

Originally Posted by Hoorai CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself

So what you're saying is that CSS is attracted to other programming languages of the same gender. Ahaha I see what you mean.

Originally Posted by Hoorai CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself

Actually it is very possible to do it solely with CSS and I have personally done it many times.

With that said, in order to achieve the result, you're going to need to use a combination of 'height' and 'max-height' (or 'min-height' depending on your desired effect) on various elements.

You could opt to have the height at a minimum of 100%, scrolling when it gets greater than that or you could alternatively have it fixed to always be a height of 100% (header right at the top and footer at the bottom) with only the body being scrollable should it exceed it's allocated height prior to being cut-off (or scrollable).

well thats all very well and interesting (and Amross your right), but....CSS is gay?!? when did that happen?!?

...congrats in coming out?..i guess.