I used #main-content and #header just to add some content to the page. So, what CSS rules we must add to have a sticky footer? First of all, we have to remove default paddings and margins and to add html and body heights:

After these actions we will get a sticky footer which is always below the visible working area. That’s because of 100% height of #wrapper. There’s not much to do with this, so we just remove the unwanted height using negative bottom margin:

#wrapper {
margin-bottom: -50px;
}

This is better. But still there is one problem. When the content is long enough, it will overlap the footer, which is not the desired effect: