pie de pagina fijo pero relativo

[xcoltx]

Hola gente pro, estoy en medio de una problematica porque en la pagina que estoy haciendo..

1. existe un div de contenido.. el cual su "height" es muy variable.. al principio de la pagina, osea solo al entrar este esta vacio.. por lo que ocupa solo height:100px al final a modo de "footer"... hasta el momento me funciona tener el footer fixed.

2. hasta el momento.. el div de contenido no crece tanto.. pero al momento de que este cresca mas de cierto tamaño.. digamos.. unos 500px .. este contenido empieza a crecer pero pasa por detras del footer.. y lo que intento es que el footer tambien baje junto con el contenido.

3. pero .. volviendo al caso 1.. cuando no hay tamaño o cuando es mucho menor.. que el footer se mantenga al fonde la pagina..

pongo el codigo que trate de hacer pero no me funciona.. para el caso 2.

Código CSS:

.header{
    height:200px;
    width:100%;
    background-color:#06C;
    border:5px solid #000;
    }
.contenido{
    /*height:auto;*/
    height:300px;
    width:100%;
    background-color:#CCC;
    border:5px solid #063;
    }
.footer{
    /*position:static !important;   */
    position:fixed;     
    left:0;
    bottom:0;
    height:95px;
    width:100%;
    background-color:#C33;
    border:5px solid #333;
    }
 

Código HTML:

<div class="header"></div>
<div class="contenido"></div>
<div class="footer"></div>
 

Alguna ayudita??