The age old problem
Getting the footer to stick to bottom of the page using CSS seems to be an age old problem. Recently, aXemedia published a cross-browser and unobtrusive method to do that. It says it supports maybe like 40 browsers on different platforms, but unfortunately, it doesn’t seem to (out of the box) support the Blueprint CSS framework.
After several hours of trial and errors, I rolled out a method that managed to make it work on both IE6 and FF3 (I didn’t go through the trouble to test it with BrowserShots or something, maybe someone can report your experience)
Enough talk, some demos
Blueprint’s sample page with a footer
The code — Sample usage
This method is basically more based on Ryan Fait’s method which requires adding extra non-semantic element to the markup:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| /* sticky-footer.css */
*
{
margin: 0;
}
html, body
{
height: 100%;
}
#main
{
height: 100% !important;
min-height: 100% !important;
}
#footer
{
clear: both;
height: 140px !important;
margin-top: -160px !important; /* This is height + padding */
}
#push
{
height: 160px; /* This is footer's height + padding */
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!-- sample.html -->
<html>
<head>
<!-- Include blueprint, sticky-footer.css here -->
</head>
<body>
<div class="main container" id="main">
<!-- All contents must be inside spans -->
<div class="span-16"></div>
<!-- ... -->
<!-- We need our empty push div here -->
<div id="push"></div>
</div>
<div class="footer container" id="footer">
<!-- We can use Blueprint grids here -->
<div class="span-18"></div>
<div class="span-6 last"></div>
</div>
</body>
</html> |
This method involves two tricks: putting a push element to make room for the .footer, and we also make .footer as another container.
Caveats
One strange side effects I’ve noticed from my approach is that now contents in .main.container must be wrapped inside columns span divs. Observant readers might notice that I changed the Blueprint sample page (long version) a little bit (by wrapping elements in column divs) so that things don’t overflow in an ugly way.
Extra — SASS mixin (untested)
If you use the excellent SASS for writing your CSS (which is totally cool, you won’t go back to CSS once you’ve tried it), here’s a little mixin for your convenience:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // sticky-footer.sass
=sticky-footer(!footer_height, !main_id="#main", !push_id="#push", !footer_id="#footer")
html,
body
:height 100%
#{!main_id}
:height 100%
:min-height 100%
#{!push_id}
:height #{!footer_height}
#{!footer_id}
:height #{!footer_height}
:margin-top -#{!footer_height} !important |
Include it in your application:
1
2
3
4
5
6
7
8
9
10
11
12
13
| // application.sass
@import sticky-footer.sass
+sticky-footer(170px, "#main", "#push", "#footer")
#main
:background yellow
// ...
#footer
:background pink
// ... |
That’s it! Notice our nicely named <divs> forms the sentence main push footer 
In our example, since these IDs are the default, we could have done with a one-liner: