CSS Fixed Footer

by | Sep 25, 2009 | CSS

Ever wonder how to keep the footer fixed to the bottom of the page? This is a handy little trick if you have some ads you want to continually display or just want to have the footer visible at all times. If done with a little flair the footer can really jazz up your design by remaining in the display at all times.The code is pretty simple but requires a little help for IE to pull it off. The fixed footer allows you to keep consistent content in front of the viewer such as ads or special offers or just plain old promos about your service. Here’s how it works:

footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

0 Comments

Pin It on Pinterest

Share This