サイズ変更時のフッタ重複コンテンツ - html、css、footer

スティッキーフッターを作成しましたが、ページの下部にとどまります。唯一の問題は、ブラウザーの下部を上にドラッグしてブラウザーを最小化すると、上記のコンテンツがフッターと重複することです。 Content divには、最小化したときにフッターの上にある画像が含まれています。また、フッター内のタイプは画像の上に表示されます（最小化されている場合）。任意の助けをいただければ幸いです。ありがとうございました。

<----- 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 ----->

.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;
}

回答：

コンテンツでフッターをプッシュダウンするには、コンテンツdivにフッターの高さに一致する負の下マージンを与える必要があります。

.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/