Sticky Footer in Bootstrap 2.3.2 causing huge gap and scroll

Question

I have implemented this sticky footer for Bootstrap 2.3.2 on my site but am running into an issue on a page that has short content here. There is too much space between the content and the footer, as well as an inconvenient scrollbar. Is there a way to prevent the huge gap in space and the scroll bar on a short page with short content?

I am using this code to generate the sticky footer.

html, body {
      height: 100%;
      margin: 0;
      padding: 0;
}

#wrap{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -150px;
}

#push{
    height: 150px;
}

#footer{
   background-color: #3BC1CD;
   height: 150px;
}

Answer 1

Following Bootstrap example, simply move your #push div in the #wrap div :

<div id="wrap">
    ...
    <div id="push"></div>
</div><!-- #wrap -->
<div id="footer">
    ...
</div>

Answer 2

It's not giving the desired result because the #push div is outside of the wrapper div.

Answer 3

In your html you have :

<div id="wrap"></div>
<div id="push"></div>
<div id="footer"></div>

in bootstrap they have :

<div id="wrap">
    <div class="container">
        <div id="push"></div>
    </div>
<div id="footer"></div>

Just indent the #push inside the #wrap

Answer 4

Remove the height on <div id="push"> or remove it altogether. This is unnecessary.