How to fill the whole page?

[Doido]

Hey guys,

I am developing a loayout based on ccs. I would like to have a main container (where the information changes and therefore its size) that changes its size in order to fill all the screen. However, for pages where there is not a lot of information, the footer remains "attached" to the main content, not being at the bottom of the screen....

Could you help me?

Till now, my layout is like that:

body {
background-color: #02AC7D;
background-image:url(../Images/relevo_3.jpg);
background-position:center;
background-repeat:repeat-y;
margin: 0;
padding: 0;
text-align: center;
border: 0;
height: 100%;
}

.twoColFixLtHdr #container {
width: 950px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
border: 0;
height: 100%;
}

.twoColFixLtHdr #header1 {
background: #DDDDDD;
height: 150px;
background-image: url(../Images/Fond_up_2.jpg);
padding: 0;
}

.twoColFixLtHdr #header2 {
background: #DDDDDD;
height: 35px;
padding: 0;
}

.twoColFixLtHdr #sidebar1 {
float: left;
width: 160px;
background: #FFFFFF;
padding: 0;
height: auto;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 160px;
padding: 0 20px;
height: 100%;
}

.twoColFixLtHdr #footer {
background-image: url(../Images/rodape_2.jpg);
padding: 0;
height: 60px;
width: 950px;
border-bottom: 0;
}

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

[infinityspiral]

You could set a

min-height

for the main content. Or you could

position:abosolute; bottom:0;

the footer