CSS Sticky footer

17 Nov 2015

Most of the modern websites & mobile hybrid applications load contents through AJAX. As a result, the initial page height in very less and lot of whitespace appears below the footer. That looks akward for users.

The following code snippets will keep your footer either at bottom of the lengthy page or at the bottom of current window when the content is less / not loaded.

The main advantage of following implementation is

It doesn't require javascript to watch if the content has overflown current view.
It supports old browsers too (Supports IE6+, that gives peace of mind that it will work in almost all browser)

* {
	margin: 0; /* Normalize all elements margins to zero*/
}
html, body {
	height: 100%; /* makes the page height equal to the browser height */
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* Legacy IE6 support */
	height: 100%;
	margin: 0 auto -65px; /* The content wrapper will be set to (100% of screen height - the footer height) */
}
.footer, .push {
	height: 65px; /* Push occupies bottom 65px of the content wrapper so that the negative margin will take just the empty space not the actual content.  */
}

<!Doctype HTML>
<html>
  <head>Test sticky footer</head>
  <body>
    <div class='wrapper'>
      <!--Main content-->
      <div class='push'></div>
    </div>
    <div class='footer'>
      <!--footer content-->
    </div>
  </body>
</html>