Як змусити підвальну частину сторінки («футер») приклеїтися до нижньої межі вікна — це, напевно, найпоширеніша проблема при верстці сторінок сайту. Рішення, звичайно, є, і їх кілька. Нижче описаний один із способів зробити так, щоб футер завжди був притиснутий до низу сторінки, незалежно від кількості контенту і типу браузера.
Вам знадобиться
Початкові знання CSS і HTML
Інструкція
-
За зразок візьмемо одну з найбільш типових схем розбивки сторінки — у неї буде «горище» (заголовок), основний блок і «підвал». Звичайно, при необхідності, в основний блок можна помістити кілька колонок, але тут ми цього робити не будемо, зосередимося тільки не позиціонуванні футера.
HTML-код сторінки буде починатися з оголошення специфікації:
Між тегами
і , крім заголовка сторінки, розмістимо вказівку кодування:А також посилання на зовнішній CSS-файл, що містить опис стилів:
Поміщати опис стилів безпосередньо в html-код сторінки ми не будемо, щоб уникнути ускладнень з браузером Opera дев’ятій версії.
Між тегами
і розмістимо блокову структуру сторінки. Першим, природно, блок заголовка. Йому дамо ідентифікатор header, щоб мати можливість задавати стилі саме для цього блоку:Це header — завжди вгорі вікна.
Потім — основний блок сторінки. Він складатиметься з двох вкладених один в одного — зовнішнього (ідентифікатор — outer) і внутрішнього (ідентифікатор — outerwrap):
Це основна частина.
І на завершення — футер:
Вся сторінка в зборі буде виглядати так:
Це header — завжди вгорі вікна.
Це основна частина.