CSS Fixed Footer

Posted by on Sep 25, 2009 in CSS | 0 comments

CSS Fixed Footer

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');
}
  • Share/Bookmark

Leave a Reply

You must be logged in to post a comment.