Як розмістити футер так, щоб він «прилип» до низу сторінки? =). Упевнений, що всі верстальники рано чи пізно задають собі це питання. Причому, рішення має бути кросбраузерності + повинно бути реалізовано за допомогою CSS, ніяких скриптів. Інакше у користувачів з відключеним яваскрипт працювати нічого не буде, в загальному це поганий стиль. Рішення, про яке я розповім, підтримують браузери IE5 +, FF1 +, Opera7 +, Safari2 + і воно написано на чистому CSS. Спочатку я розповім яка повинна бути розмітка сторінки, а потім про CSS стилях, які приведуть це все в дію.
Розмітка сторінки
Що ми маємо: container містить content. а footer знаходиться окремо, після головного контейнера. Тут дуже важливо, що футер знаходиться не всередині контейнера, який містить контент сторінки.
Щоб розмістити футер внизу сторінки, необхідно застосувати наступні стилі:
Все просто. Розтягуємо html, body, container максимально можливо на всю висоту сторінки. Після цього футер необхідно підняти вгору на величину, рівну його висоті. Для цього застосовується margin-top з негативною величиною 70px, рівній висоті нашого футера. Все ок, але з таким підходом, якщо content займе всю висоту сторінки, то футер буде налазити на нього, а це не круто і вже зовсім не те що було потрібно. Для цього і робиться внутрішній відступ знизу у content:
Після цього, вміст content завжди буде знаходиться на відстані, рівному висоті футера, вище низу сторінки. Цей отвір якраз і заповнить наш футер.