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>