Well, I have been working on a few projects and one thing that made me frustrated was the hassle of trying to get my footer to remain at the bottom of the page. In certain cases you will have content on a specific page that will not be the full length of the page; therefore, if the footer came right after that it might show up near the middle or the top of the page. The point is to get your footer to stay at the bottom of the page no matter the height of the page.

Problem: CSS/HTML Footer does not remain at the bottom of the page.

Solution: CSS Sticky Footer, Use the CSS and HTML code below:

/* must declare 0 margins on everything */

html, body, #wrap {height: 100%; margin:0; padding:0;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;}

<div id="wrap">

</div>

<div id="footer"></div>

There you go... It should be that Simple. Enjoy!