How do I get my wrapper push down into sticky footer

Question

I want make a sticky footer using jQuery.

Here what I have done http://jsbin.com/elapi/edit

I need some help to make my #wrapper border line will wrap entire page until footer.

Let me know

Answer 1

Check this out, although it doesnot use jquery. How to align footer (div) to the bottom of the page? in this http://ryanfait.com/sticky-footer/ and http://www.cssstickyfooter.com/ has some solution using simple css and html. The footer sticks to the bottom is the page is less than viewport. In case the page height increases more than viewport size then the footer is appended to the bottom of page, that is footer will not overlap with main body.

Answer 2

You needn't use jQuery to achieve this, you should be able to use pure CSS. Something like this:

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

Then just make sure you have enough padding on the bottom of your main content to ensure it isn't obscured by the footer when scrolled to the end.