Skip to content

Instantly share code, notes, and snippets.

@danielchikaka
Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielchikaka/1d591e050de7aa321a73 to your computer and use it in GitHub Desktop.
Save danielchikaka/1d591e050de7aa321a73 to your computer and use it in GitHub Desktop.
This gist is the sticky footer hack, for modern browsers .. it supports IE8 too
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
/*And on your html page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others);*/
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment