Sticky Footer using only css/html (works in IE)

For a long time, I tried with no avail to get a sticky footer that would work in IE, here is a slick way around IE's incompatibility

For css, all you need is this:

* { margin: 0;}
html, body { height: 100%;}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push { height: 4em; /* .push must be the same height as .footer */}

And for html, this:

<body>

  <div class="wrapper"> 

    Put your content here

    <div class="push"></div>

  </div>

  <div class="footer">
    Footer Here

  </div>

</body>

All credit goes to http://ryanfait.com/sticky-footer/ - thanks this is great!

 

 

Comments are closed