I need help with div color (css)

I'm still pretty new to css (and website building in general for that matter) and I'm trying to create a css layout. However I'm running into a problem. I want the light gray color of the css frames to stretch the whole length of the page except for just 10px at the bottom of the screen.
I've been experimenting with the bottom and height properties, but nothing is working the way I want it to.
I can set the height of the frame to a specific px but then I'm going to have to use a different code for every page because every page will have a different amount of text, and I want to be able to link to the same css file for most, if not all pages. I can take out the height and bottom properties, but then the gray color just continues for however long the text does.


So here's what I've ended up with: http://toucanets.freehosting.net/testpagea.html

Here's the CSS:

body{
margin: 10px;
padding: 0;
border: 0;
overflow: auto;
height: 100%;
max-height: 100%;
background:#99FFCC;


}

#header{
position: relative;
margin: 0;
Width: 100%;
height: 161px;
overflow: hidden;
background:#EFEFF3;
color:#000000;

}

#contents {

position:absolute;
top:162px;
left:200px;
right:75px;
background:#EFEFF3;
color:#000000
}




#rightframe {

position: absolute;
width:190px;
top:162px;
right:10px;
background:#EFEFF3;
color:#000000
}



#menu{
top: 120;
left: 0px;
right: 200px;
background:#EFEFF3;
color:#000000;
}


EDIT:


Basically I want to be able to do this (except 10px of that green coloration on the bottom, and with out
the extra scroll bar that shows up in ie)

http://toucanets.freehosting.net/main2.html

but not have the text bleed into green space (rather I want the gray to continue, just leaving 10px at the bottom) as with when the css is used on this page for example:

http://toucanets.freehosting.net/haltest.html


and here's that css:


body{
margin: 0px;
padding: 0;
border: 0;
overflow: auto;
height: 900px;
max-height: 100%;
background:#99FFCC;
margin-right:10px;


}

#header{

position: relative;
height: 161px;
overflow: hidden;
background:#EFEFF3;
color:#000000;
margin-top:10px;
margin-right:0;
margin-left:10px;

}

#contents {
position:absolute;
top:162px;
left:200px;
right:75px;
height:100%;
margin-top:0;
margin-right:0;
margin-left:0;
margin-bottom:10px;
background:#EFEFF3;
color:#000000;
}




#rightframe {
position:absolute;
height:100%;
top:162px;
right:10px;
margin-top:0;
margin-right:10px;
margin-left:0;
margin-bottom:10px;
background:#EFEFF3;
color:#000000;
}





#menu{
top: 120px;
left: 10px;
right: 200px;
background:#EFEFF3;
color:#000000;
margin-top:0;
margin-right:0;
margin-left:10px;
margin-bottom:10px;
height:100%;
}

Never use absolute positions to make the basic layout. Check http://www.bonrouge.com/3c-hf-fluid.php for a good 3 column layout.

So using a position other than absolute will fix the issue of how far down the page the background color of each element goes? I guess I'll mess around with the positions I'm using a bit and see.

Anyhow got rid of the scroll bar problem:
http://toucanets.freehosting.net/main3.html

I guess I'll mess around with the positions I'm using a bit and see. Have you check that tutorial in my above post?

PS: table are very bad for layout (http://www.hotdesign.com/seybold/).

will do when I'm more awake. Thanks for the links.