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;

.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 id="footer"></div>

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


or Sign Up

Sign Up

or Login
Want to create your own SAAS?

I can teach you to create your own Software as a Service. Click here to learn more!

Visit SAAS Adventure!