Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Create a sticky footer with CSS

Tuesday, March 5th, 2013 by Servage

It often looks good to make the footer of your website “sticky” to the bottom of your page. This can be achieved with CSS, and is actually rather simple, knowing the right code to do it ;-) The following snippet was found here. Try it out.

Sticky footer CSS

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

IE6 hack for compatibility

* 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');
}
Create a sticky footer with CSS, 4.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.