CSS for Fixed Footer

Question

I have a pretty basic HTML page. The code looks like the following:

Answer 1

I am writing this answer because I think it may help someone in the future. I am facing a problem even after defining the height of the footer and margin-bottom for the body. The problem is if you have responsive website where the height of the footer dynamically changes based on screen size, you will have content overlapping. To solve that, I have used jQuery - Keep every setting same except for margin-bottom for body and height of footer.

var footerHeight = $('#main_footer').outerHeight(); // get the footer height excluding margin
    $('#main_footer').css('height', footerHeight + "px");
    $('body').css('margin-bottom', footerHeight + 10 + "px");

This will always keep the footer at the bottom even when the footer height changes and there wil be no content over lapping.