I got the basic of sticky footer from cssstickyfooter.com and here is my sticky footer combining with blueprintcss.
The HTML code:
<html> <head>...</head> <body> <div class="container"> ... </div> <div id="stickyfooter"> Here you go your fancy sticky footer.. </div> </body> </html>
The CSS:
(I add these lines in screen.css)
/** for sticky footer */
body {margin:0}
html, body {height: 100%;}
.container {height: 100%;}
#stickyfooter {
position:relative;
height: 150px;
margin-top: -150px; /* must be the same value as height */
clear:both;
text-align:center; /* up to you */
background:#ff0; /* up to you */
}
The height of the footer is sets by “height” and “margin-top” in “#stickyfooter”.
Please note that I’m not tested it yet in other browsers but firefox 3.5.1 (Shiretoko) in Ubuntu 9.04. Please feel free to drop me some comments.
Recent Comments