Як притиснути футер (підвал) до низу
Притиснути футер до низу екрану. вимоги:
- підвал притиснутий до низу екрану при висоті вікна браузера більше висоти сторінки не залежно від контенту
- футер знаходиться на призначеному йому місці при обсязі контенту більше, ніж висота вікна браузера
- працює в у всіх популярних браузерах
- надійність - не залежить від складності верстки
Хорошим тоном є заповнення сайтом всієї доступної області екрана браузера (як мінімум по висоті для статичних по ширині дизайнів).
Часто прі не притиснутому підвалі сайт виглядає дивно
Зовсім інша справа, коли задумка дизайнера точно передана
Для прикладу візьмемо просту сторінку, що складається з двох основних блоків: основного (main) і підвалу (footer). Зробимо щоб основний блок посів всю площу вікна браузера незалежно від кількості контенту, при цьому футер пригорнемо до низу екрану так, щоб в браузері не з`явилася вертикальна смуга прокрутки. Як робимо:
Робимо 2 блоки: основний (main) і земельна ділянка (footer). Основний контейнер розтягуємо на всю висоту екрана браузера (min-height), підвалу жорстко вказуємо висоту (height).
При цьому загальна висота сайту складе висота екрану + висота підвалу.
Негативним відступом (margin-top) "в'їжджаємо" в основний блок, щоб висота сайту становила лише 100% висоти екрану.
При такому розташуванні блоків і при достатній кількості контенту (наприклад, тексту) в основному блоці, можливі накладки контенту в основному блоці на підвал:
Для уникнення цієї потенційної проблеми, додаємо в кінець основного блоку порожній блок, висотою не менше висоти підвалу (а краще трохи більше, щоб був відступ між контентом і підвалом):
Тепер, якщо контенту буде багато, він буде рухати порожній блок вниз. А це буде опускати і підвал, не даючи налезть на нього контенту.
Дивимося як це виглядає в коді:
Замітка. при використанні блочної верстки і плаваючих основних блоків (колонок) для .hFooter слід додати clear. both, щоб підвал розташувався під колонками .:
Замітка 1: Якщо ти вже трохи освоїв CSS, тоді може виникнути питання: "Навіщо використовувати додатковий елемент, якщо можна скористатися padding-bottom?". Відповідь - так просто його тут використовувати не можна, тому що розмір блоку дорівнює його ширині і висоті + сумі внутрішніх відступів + сумі товщини бордюрів. Зв'язка min-height. 100% і padding-bottom дасть висоту сайту більше висоти екрану. В результаті навіть при відсутності контенту зовсім, підвал буде за межами "першого екрану". Як це можна обійти дивись нижче.
Замітка 2. У Opera версії 9.5 і вище при додаванні doctype цей приклад не спрацює. Варіанти обходу:
- додати в основний тег-контейнер хоча б один плаваючий блок:
update 8.12.09 - Недолік даного прийому
Це використання додаткового порожнього елемента hFooter. У реальних умовах (коли вміст сайту не пусте і застосовується блокова верстка) цього можна уникнути застосувавши прийом clearfix - цей прим допоможе очистити потік без використання додаткового елемента, а щоб Контент не наліз на футер, пропишемо в колонках padding-bottom
update 28.12.09 - проблеми з z-шарами
У вищеописаному прийомі футер піднімали негативним відступом вгору. При цьому виникаємо потенційна проблема з z-шарами. Наприклад, нам потрібно показати спливаюче вікно (нехай це буде div class = "popup"), яке буде позиціонуватися щодо контейнера main.
Все добре до тих пір поки у нас не перетинаються спливаюче вікно і земельна ділянка (а така ситуація досить часто виникає) - ось тут починаються проблеми. Немотря на те, що у спливаючому вікні найбільший z-index, воно буде перекриватися футером, тому що батько popup має z-index менший, ніж у підвалу:
Варіант 1 - шукати можливість позиціонувати вікно не щодо main, а щодо будь-якого іншого дочірнього елемента, який розташований в main. Таким чином, позбудемося вказівки z-index для main і footer. Але такий варіант не завжди можливий, тому розглянемо другий варіант притиснення футера.
Рішення 2 - абсолютне позиціонування
Ідея схожа на рішення 1:
- розтягуємо основний блок на всю всот екрану
- резервуємо місце для підвалу
- щодо основного блоку позиціонуємо підвал в самий низ абсолютним позиціонуванням
Такий підхід вирішить проблему з спливаючими вікнами, тому що і footer і popup матимуть загального батька, а значить з z-шарами сюрпризів не буде.