Казалось бы, прижать подвал к низу окна проще простого: #footer {position:absolute; bottom:0;}. Но этот способ всё испортит в случае длинного текста на странице. Подвал прижимается к нижнему краю окна, а вовсе не его содержимого. И поэтому окажется где-то в середине длинной страницы. Учесть высоту всей страницы можно (и это довольно популярное решение), но я вместо этого предлагаю вообще отказаться от абсолютного позиционирования. Такой способ немного сложнее, зато гораздо надёжней в плане совместимости с браузерами.

Делаем на странице два блока: основной и подвал. А в стилях сразу же задаём высоту страницы и убираем отступы. Получается такой код:

HTML

<div id="page-all">
В этом блоке должно располагаться всё содержимое страницы кроме подвала.
</div>
<div id="page-footer">собственно, подвал</div>

CSS

html, body {height: 100%; margin: 0; padding: 0;}

Нам нужно растянуть первый блок на всю высоту окна. Причём использовать свойство height:100%; для этого мы не можем. Дело в том, что длинный текст, превышающий по высоте эти 100%, в соответствии со стандартами вылезает за пределы блока. К счастью, есть другое свойство, которое позволит блоку растянуться при длинном тексте и сохранить нужную нам высоту при коротком.

CSS

html, body {height: 100%; margin: 0; padding: 0;}
#page-all {min-height: 100%;}

Есть одна проблема — IE6 свойство min-height не понимает. Но зато он неправильно использует height: растягивает блоки с длинным текстом, то есть ведёт себя именно так, как нам нужно. Напрашивается выход: подсунуть ему значение height, которое проигнорируют другие браузеры. Воспользуемся для этого хаком.

CSS

html, body {height: 100%; margin: 0; padding: 0;}
#page-all {min-height: 100%;}
* html #page-all {height: 100%;}

Пора переходить к подвалу. Обратите внимание на то, что его высота должна быть фиксированной. К счастью, практически всегда в подвале находится что-то постоянное (например, копирайт), и фиксированная высота неудобств не доставляет.

CSS

html, body {height: 100%; margin: 0; padding: 0;}
#page-all {min-height: 100%;}
* html #page-all {height: 100%;}
#page-footer {height: 30px;}

Высота всего содержимого страницы теперь на 30 пикселей больше высоты окна (100% основного блока + 30px подвала). Чтобы вместить всё в окно и убрать полосу прокрутки, нужно сдвинуть подвал вверх на эти самые 30px, то есть на расстояние, равное его высоте. Используем для этого отрицательный отступ у первого блока (если задать верхний отступ у самого подвала, могут возникнуть проблемы в IE).

CSS

html, body {height: 100%; margin: 0; padding: 0;}
#page-all {min-height: 100%; margin-bottom: -30px;}
* html #page-all {height: 100%;}
#page-footer {height: 30px;}

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

HTML

<div id="page-all">
Подвал — помещение в здании, расположенное ниже уровня земли; cтатья во всю нижнюю часть газетного листа.
<div id="page-empty"></div>
</div>
<div id="page-footer">собственно, подвал</div>

Высоту этого блока нужно сделать равной высоте подвала или чуть больше (в этом случае между содержимым страницы и подвалом останется промежуток). И последний штрих — на будущее. На странице могут встретиться плавающие блоки. Чтобы пустой блок располагался под ними, зададим ему свойство clear. Эта мера предосторожности позволит использовать подвал на всех страницах без изменений кода.

CSS

html, body {height: 100%; margin: 0; padding: 0;}
#page-all {min-height: 100%; margin-bottom: -30px;}
* html #page-all {height: 100%;}
#page-empty {height: 40px; clear: both;}
#page-footer {height: 30px;}