Цей спосіб, який використовує негативний відступ, описаний на багатьох сайтах. Я хочу розповісти про деякі неочевидних моментах і проблемах, які можуть виникнути. Для початку нам потрібні два блоки: основний, в якому буде все крім підвалу, і сам підвал.
Висота блоку page-wrapper залежить від розміру body, тому для html і body потрібно обов'язково задати висоту 100%, без неї підвал до низу НЕ притисне. З цієї ж причини навколо page-wrapper не повинно бути інших тегів.
У html і body за замовчуванням є відступи (margin і padding), які додаються до заданої висоті, чому з'являється непотрібна смуга прокрутки. Ці ви хочете скинути відступи.
Розтягуємо блок page-wrapper на всю висоту вікна за допомогою властивості min-height. Потрібно використовувати саме min-height, а не height, щоб не обмежувати висоту блоку на довгих сторінках. В IE6 ці властивості працюють неправильно, тому йому потрібна звичайна висота height, задана за допомогою конструкції * html, яку ігнорують інші браузери.
Блок page-footer виявився за нижнім краєм вікна, і потрібно зрушити його вгору. Логічно було б використовувати для цього негативний margin-top, але з ним в старих версіях IE підвал взагалі перестане відображатися. Тому потрібно використовувати негативний нижній відступ у блоку page-wrapper. Величину відступу робимо рівній висоті підвалу (50px в цьому прикладі).
page-wrapper min-height. 100%;
margin-bottom. -50px;
>
* Html .page-wrapper height. 100%;
>
Тепер підвал закриває собою нижню частину сторінки, і на довгих сторінках під ним сховається частина контенту. Щоб цього не сталося, потрібен відступ внизу блоку page-wrapper. Але padding використовувати не можна, так як він додасться до стовідсоткової висоті. Тому додаємо порожній блок з висотою, що дорівнює висоті підвалу. Ось що вийшло в результаті:
html, body height. 100%;
margin. 0;
padding. 0;
>
.page-wrapper min-height. 100%;
margin-bottom. -50px;
>
* Html .page-wrapper height. 100%;
>
.page-buffer height. 50px;
>
Можливо, вам здалося дивним те, що висота блоку page-footer так і не задана. Справа в тому, що висота підвалу ніяк не впливає на його розташування і потрібна тільки тоді, коли низ підвалу повинен точно збігатися з низом сторінки. Наприклад, якщо у підвалу є власний фон.
Іноді після додавання на сторінку інших елементів з'являється незрозуміла смуга прокрутки. Причина в тому, що у верхнього елементу (найчастіше це заголовок або абзац тексту) є margin, який виступає за край блоку page-wrapper. У статті Івана Сагалаєва про кордони і відступи докладно розглядається ця проблема і способи її вирішення. Найпростіше позбутися прокрутки, замінивши margin цього верхнього елементу на padding.