Volevo posizionare il footer in fondo alla pagina sempre indipendentemente dal contenuto. Già fatto in passato senza problemi. Ho creato un layout un po' particolare. Caratterizzato da un header e sotto l'header un box che dovrebbe estendersi per tutta la pagina.

Questo è l'html.

Codice PHP:
<body class="oneColFixCtrHdr">
<div id="container">
  <div id="header">
      <div id="logo"></div>
  </div>
  <div id="main_top">  
  </div>
  <div id="main_box">
  </div>
  <div id="main_bottom">  
  </div>
</div>
</body> 
Questo è il css

Codice PHP:
html,body {
    font: 100% Tahoma, Geneva, sans-serif;
    background: #333333;
    background-image:url(../img/bg.jpg);
    background-repeat:repeat-x;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
    height:100%;
}
.oneColFixCtrHdr #container {
    width: 960px;
    margin: 0 auto; 
    text-align: left; 
    height:100%;
}
body>.oneColFixCtrHdr#container {
    height: auto;
    min-height: 100%;
}
.oneColFixCtrHdr #header {
    height:100px;
}
.oneColFixCtrHdr #logo {
    width:282px;
    height:100px;
    margin-left:25px;
    background-image:url(../img/layout/logo.png);
    background-repeat:no-repeat;
    background-position:center;
}
.oneColFixCtrHdr #main_top {
    height:23px;
    background-image:url(../img/layout/box_top.png);
    background-repeat:no-repeat;
}
.oneColFixCtrHdr #main_box {
    background-image:url(../img/layout/box_bg.png);
    background-repeat:repeat-y;
}
.oneColFixCtrHdr #main_bottom {
    width:960px;
    height:22px;
    background-image:url(../img/layout/box_bottom.png);
    background-repeat:no-repeat;
    position:absolute;
    bottom:0;
    margin-bottom:25px;
} 
Non riesco a fare in modo che #main_box si estenda fino a toccare main_bottom. Se imposto l'altezza al 100% main_box arriva addirittura oltre il footer e anche senza contenuti mi costringe a scrollare. Come posso risolvere?
Grazie in anticipo.