CSS Sticky Footer

HTML

<!--[if lt IE 7]>
<style type="text/css">#sfWrap {display:table;height:100%}</style>
<![endif]-->

<div id="sfWrap">

      <div id="sfMain">

      </div>

</div>

<div id="sfFooter">

</div>

CSS

/* sticky footer stuff */

html, body {height: 100%;}

#sfWrap {min-height: 100%;}

#sfMain {overflow:auto; padding-bottom: 130px;}  /* must be same height as the footer */

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

/*Opera Fix*/

body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ } 

.NET (non-MVC)

When coding sites for ASP.net where each page is inside a tag, be sure to add the form tag to the height:100% statement, else it will break the sticky footer. Like this; html, body, form {height: 100%;} For detailed guide please see http://www.cssstickyfooter.com/using-sticky-footer-code.html