jquery - How can I push my footer down to the very bottom of the page, regardless of how much or little content is in the body? -

i dynamically generating content of web page's main content. page has header , footer. header remains anchored top fine, footer hugs bottom of body rather anchoring bottom of page. when amount of dynamically generated content nil or minimal, want footer hug bottom of page. how can that?

here example of sticky footer: http://twitter.github.io/bootstrap/examples/sticky-footer.html

the following css taken link above.

css

/* sticky footer styles -------------------------------------------------- */ html, body {      height: 100%;      /* html , body elements cannot have padding or margin. */ }  /* wrapper page content push down footer */ #wrap {      min-height: 100%;      height: auto !important;      height: 100%;      /* negative indent footer it's height */      margin: 0 auto -60px; }  /* set fixed height of footer here */ #push, #footer {      height: 60px; } #footer {      background-color: #f5f5f5; }  /* lastly, apply responsive css fixes necessary */ @media (max-width: 767px) { #footer {      margin-left: -20px;      margin-right: -20px;      padding-left: 20px;      padding-right: 20px; } }    /* custom page css -------------------------------------------------- */ /* not required template or sticky footer method. */  .container {      width: auto;      max-width: 680px; } .container .credit {      margin: 20px 0; }    /* custom page css -------------------------------------------------- */ /* not required template or sticky footer method. */  .container {      width: auto;      max-width: 680px; } .container .credit {      margin: 20px 0; }