Rodapé Sobreposição de conteúdo ao redimensionar - html, css, rodapé

Eu criei um rodapé pegajoso, e parece serficar na parte inferior da página. O único problema é que quando eu minimizar meu navegador arrastando a parte inferior do navegador para cima, o conteúdo acima se sobrepõe ao rodapé. O conteúdo div contém imagens que estão no topo do rodapé quando eu minimizar. Além disso, o tipo dentro do rodapé aparece acima das imagens (quando minimizado). Qualquer ajuda seria apreciada. Obrigado.

<----- Estrutura HTML ---->

<div class="supercontainer"

<div class="nav"></div>

<div class="wrapper">

<div class="content"></div>
<div class="push"></div>

</div>

</div>

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

<----- CSS relevante ----->

.supercontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
position: relative;
}

.footer {
background-color: black;
width: 100%;
height: 100px;
}
.push {
height: 100px;
}

Respostas:

Para obter o conteúdo para empurrar para baixo o rodapé, você precisa dar ao conteúdo div uma margem inferior negativa que corresponda à altura do rodapé.

.supercontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
position: relative;
}

.footer {
background-color: black;
width: 100%;
height: 100px;
}

http://css-tricks.com/snippets/css/sticky-footer/