DIV avec 100% de la hauteur est trop grande, même sans contenu

Je suis en train de mettre en œuvre un collant pied de page qui fonctionne sauf que le principal emballage div à 100% de la hauteur est d'étendre trop haut (#body-wrap) et elle provoque un énorme fossé entre le contenu et le pied de page. Ainsi, au lieu de le pied de page assis au bas de l'écran comme il est censé le faire, je dois la faire défiler en bas de la page, passé le grand écart pour l'afficher.

J'ai quelque chose comme ce que mon code HTML:

<div id="body-wrap">

    <div id="content">

             [about 100px of content here]

    </div><!-- end #content -->

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

</div><!-- end #body-wrap -->

<div id="footer-wrap">

    <div id="footer-content">

              [about 300px of content here]

    </div> <!-- end #footer-content -->

</div> <!-- end #footer-wrap -->

Et mon CSS:

html, body {
height: 100%;
}

#body-wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -300px; /* the bottom margin is the negative value of the footer's   height */
 }

.footer-main-wrap, .push {
height: 300px; /* .push must be the same height as .footer */
}

Quelqu'un a une idée pourquoi le 100% de la hauteur d'étendre plus loin que le contenu?