sunblush

I have been using a new CSS tech­nique for cre­at­ing fixed foot­ers – that is, foot­ers which pin them­selves to the bot­tom of the browser win­dow – with­out using JavaScript. Head­scape designer Ed Mer­ritt is the one who came up with the idea, and like most ele­gant solu­tions, this one is so sim­ple that I wish I’d thought of it. It really works.

Assum­ing your basic HTML lay­out markup looks like below:

1
2
3
4

<div id="container">
  <div id="content"></div>
  <div id="footer"></div>
</div>

… you can use the fol­low­ing CSS exam­ple to pin your footer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#container {
  position:absolute;
  min-height:100%;
}
 
#content {
  margin-bottom:100px; /* same as footer height */
}
 
#footer {
  position:absolute;
  bottom:0;
  height:100px; /* same as content margin-bottom */
}

So, hack away. It’s not suit­able for every design, of course, but it just might help you get rid of that annoy­ing white­space below your footer, for instance on a content-starved page which ends up far short of the win­dow height.

Tags: css