Search code examples
cssheightfootersticky-footer

DIV with 100% height is too tall even without content

I'm trying to implement a sticky footer which is working except that the main wrapping div's 100% height is extending way too tall (#body-wrap) and it's causing a huge gap between the content and the footer. So instead of the footer sitting at the bottom of the screen like it's supposed to, I have to scroll down the page past the huge gap to view it.

I have something like this as my 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 -->

And my 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 */
}

Anyone have any idea why the a 100% height would extend further than the content?

Solution

  • When you specify height as a percentage (e.g., height: 100%), that's in relation to the parent container, not the contents of the element. If you're not needing to support IE6, you'll probably find this a lot easier to implement using position: fixed for the footer.

    Edit: I just noticed another thing - in your markup you have an element with ID footer-wrap, but in your CSS, you're using the selector .footer-main-wrap. Try changing .footer-main-wrap in your CSS to #footer-wrap.