Іноді дизайн сайту вимагає щоб футер або, як його ще називають, підвал сайту був притиснутий до низу вікна браузера, коли контенту мало або немає зовсім, і поводився як звичайно, якщо висота контенту більш ніж вікно браузера.
Для того, щоб прив'язати футер до низу екрану, необхідно знати його висоту (нехай буде 50px). Далі задаємо елементам html і body висоту 100% і прибираємо відступи. Контент пишемо в блок (дамо йому id = "content") і поміщаємо в контейнер з відносним позиціонуванням (дамо йому id = "container"), а футер в блок висотою 50 px, також з відносним позиціонуванням і розташуємо його після контейнера.
Зараз у нас з'явилася смуга прокрутки, а футер розташовується нижче нижнього краю вікна. Нам потрібно його підняти на його висоту. Надаємо йому margin-top: -50px, а якщо футер у Вас з рамкою, то піднімати футер потрібно на висоту футера + ширина рамки.
Тепер, якщо контенту мало, футер все одно буде притиснутий до нижньої частини екрану. А якщо багато? Дивимося і жахається. Контент заліз під футер. Щоб це виправити, достатньо блоку "content" вказати отсуп: padding-bottom: 50px.
Для виродка IE6 необхідно застосувати хак або умовний коментар, оскільки він не розуміє властивості min-height.
Оскільки IE6 обробляє! Important з помилкою, цим можна скористатися: всі браузери застосують height: auto, а IE6 останнє значення height - 100%, що нам і потрібно.
Але не тільки IE6 поводиться не так як треба, але і Opera 9.xx. При відкритті сторінки опера відображає наш футер відразу після контенту, а не знизу вікна, хоча після змін розміру вікна опери футер встає туди, куди ми і задумали. Цей баг вирішується дуже просто, за допомогою тега link: або ми виносимо стиль в окремий файл завантажуємо його в тезі link, або залишаємо в заголовку документа, але після опису стилю пишемо все той самий тег link, вказавши в параметрі href неіснуючий файл. Я поступив ось так:
Зауважте, що якщо в параметрі href нічого не вказати, цей хак не спрацює.
Ось ніби і все. Футер прив'язаний до низу екрану, контент не ховається за ним і всі правильно відображається у всіх популярних браузерах.