1. Всё содержимое контейнера body, кроме самого футера поместим в один большой блок, назовём его div id="main".

2. В CSS зададим этому блоку параметры высоты и ширины равные 100%.

3. Блок футера разместим в коде под блоком main.

4. В CSS зададим футеру относительно позиционирование и высоту, например в 60 пиксел.



Схема отображения блоков в браузере

На картинке схематично показано, как это будет выглядеть в браузере. На экране будет виден только синий блок, появится скроллбар и зеленый блок уползёт под экран на 60 пиксел.

5. Вернём футер на экран при поможи свойства margin-top:-60px для футера.




6. Теперь футер прижат к нижней кромке, единственная проблема - футер залез на блок main в его нижних 60 пикселах и если main заполнится, то блоки налезут друг на друга. Решим проблему при помощи стопорного блока, который расположем в самом конце блока main. Ему пропишем высоту в высоту футера, то есть 60 пиксел.

7. Умные браузеры уже довольны, теперь нужно поговорить по душам с Internet Explorer, будь он неладен. Чтобы милый IE начал показывать наш футер без скроллбара зададим высоту дважды через хак:
min-height: 100%
height: auto !important
height: 100%

Посмотреть готовый пример.