footer

Fix Footer

This shows how to have a footer appear at the bottom of a webpage using HTML and CSS even if the content for the page is short and doesn’t fill the whole height of the browser window. When then browser is re-sized it stays at the bottom and moves with the window, but will not overlap the content area. If the content is higher than the browser window then the footer will remain underneath it.

#footer {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
background: #000000;
line-height: 30px;
color: #ffffff;
}

/* IE6 */
* 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’);
}