sinrise/Simple-Pure-CSS-Sticky-Footer.markdown

## index.html
<html>
  <body>
    <div id="wrapper">
      <div id="content">
        <h1>heading</h1>
        <h2>body</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div id="footer">
      <p>&copy; 2014 Some Dude</p>
    </div>
  </body>
</html>

## Simple-Pure-CSS-Sticky-Footer.markdown

      
    Raw
  

              Simple-Pure-CSS-Sticky-Footer.markdown
            
          
    Simple Pure CSS Sticky Footer

This is the simplest possible implementation for a sticky footer done purely in CSS. No js trickery. The craziest thing is the psuedo :after on #wrapper, but it should still be cross-browser compatible all the way down through IE8. IE6-7 do not support psuedo selectors.
It will keep your footer at the bottom of the page no matter how much or little vertical space exists, but scrolls away. It's not the same as a fixed footer.
I added a #content div with a few things and some padding just to make it look like something. None of that is necessary. It will work with an empty #wrapper. Important thing is to keep your footer element outside your wrapper, make sure the :after has the content and display attributes set as shown, the footer height and #wrapper:after can be set at the same time to save a little typing, but is not necessary. It's important to make sure the negative bottom margin of the #wrapper is set to the total box height. I have a 1px border at the top of my #footer so the negative #wrapper margin needs to be 51px. Works with class, id, or footer css3 tag.
A Pen by sinrise on CodePen.
License.

  
## style.css
* { margin: 0; padding: 0; }

html, body { height: 100%; }

#wrapper {
  min-height: 100%;
  margin: 0 auto -51px;
}

#wrapper:after {
  content: "";
  display: block;
}

#content { padding: 20px; }

#wrapper:after, #footer { height: 50px; }

#footer {
  padding: 0 20px 0;
  border-top: 1px solid #000;
}
	<html>
	<body>
	<div id="wrapper">
	<div id="content">
	<h1>heading</h1>
	<h2>body</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	</div>
	<div id="footer">
	<p>© 2014 Some Dude</p>
	</div>
	</body>
	</html>
	* { margin: 0; padding: 0; }

	html, body { height: 100%; }

	#wrapper {
	min-height: 100%;
	margin: 0 auto -51px;
	}

	#wrapper:after {
	content: "";
	display: block;
	}

	#content { padding: 20px; }

	#wrapper:after, #footer { height: 50px; }

	#footer {
	padding: 0 20px 0;
	border-top: 1px solid #000;
	}