CSS Sticky Fixed Footer

in Tutorials on 15 Jul 2013


There are many ways to keep your footer stuck to the bottom of the page, a very simple method used below can be applied easy to SMF index.css file. This CSS footer stylesheet will make a footer stick to the bottom of the page.


Open index.css file and at the very end, add this code.

#footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: rgb(65, 131, 196);
    color: rgb(255, 255, 255);
    font-size: 14px;
    padding: 30px;
    text-align: center;
}

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



PixelfyStudio Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs PixelfyStudio.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded PixelfyStudio in 2009 to which he is dedicated full time.

PixelfyStudio.com | SimpleMachines.org




0 Comments


Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.