<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
  <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- If you aren't using jquery you can use the body element instead (body{width:100%;display:table;height:100%})of the #wrap div as jquery has a bug (
https://bugs.jquery.com/ticket/7261) in webkit when the body is display:table. -->

<div id="wrap">
<header><h1>Fluid Height Sticky footer simple - IE8+ (no hacks )</h1></header>
<main class="content">Content</main>
  <footer class="footer"><p>Sticky footer - <a target="blank" href="https://codepen.io/paulobrien/full/rxyEMN/">See flexbox version with 2 columns</a></p></footer>
</div>

html, body,#wrap {margin:0;	padding:0;	height:100%;}
#wrap {display:table;width:100%}
/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
.content { background:#ccc; }
header {	background:#999;	color:#fff;	text-align:center;	padding:10px 0}
header, .footer, main { display:block}/* ie7 and under*/
header, .footer, main { display:table-row }
/* height 1px on the header and footer is the sticky footer technique */
header, .footer{height:1px}
h1{padding:10px;margin:0;}
.footer {background:#999;	color:#fff;	text-align:center;}
.footer p {	margin:0;	padding:10px}