Хоббі та розваги

Як притиснути футер до низу


 

Як змусити підвальну частину сторінки («футер») приклеїтися до нижньої межі вікна — це, напевно, найпоширеніша проблема при верстці сторінок сайту. Рішення, звичайно, є, і їх кілька. Нижче описаний один із способів зробити так, щоб футер завжди був притиснутий до низу сторінки, незалежно від кількості контенту і типу браузера.



Вам знадобиться

Початкові знання CSS і HTML

Інструкція

  1. За зразок візьмемо одну з найбільш типових схем розбивки сторінки — у неї буде «горище» (заголовок), основний блок і «підвал». Звичайно, при необхідності, в основний блок можна помістити кілька колонок, але тут ми цього робити не будемо, зосередимося тільки не позиціонуванні футера.

    HTML-код сторінки буде починатися з оголошення специфікації:

    Між тегами і , крім заголовка сторінки, розмістимо вказівку кодування:

    А також посилання на зовнішній CSS-файл, що містить опис стилів:

    Поміщати опис стилів безпосередньо в html-код сторінки ми не будемо, щоб уникнути ускладнень з браузером Opera дев’ятій версії.

    Між тегами і

    Web Analytics
    розмістимо блокову структуру сторінки. Першим, природно, блок заголовка. Йому дамо ідентифікатор header, щоб мати можливість задавати стилі саме для цього блоку:

    Потім — основний блок сторінки. Він складатиметься з двох вкладених один в одного — зовнішнього (ідентифікатор — outer) і внутрішнього (ідентифікатор — outerwrap):

      
        Це основна частина.
      

    І на завершення — футер:

    Вся сторінка в зборі буде виглядати так:


    Це основна частина.

    Web Analytics

  2. Тепер перейдемо до вмісту файлу стилів. У ньому реалізована така схема: основному блоку сторінки буде задана 100% висота, заголовок буде позиціонується абсолютно, а футер — відносно. Щоб заголовок не перекривав основний зміст сторінки, це основний зміст поміщено в додатковий блок усередині основного блоку, і цьому додатковому блоку заданий відступ зверху, рівний висоті блоку заголовка. А футер заданий негативний відступ зверху, рівний його висоті — таким способом він буде піднятий над нижньою кромкою вікна на всю свою висоту. Повний вміст css-файлу:

    * {margin: 0; padding: 0}
    html, body {height: 100%;}

    body {
    color: black;
    position: relative;
    }
    # Outer {
    min-height: 100%;
    margin: 0;
    background: white;
    color: black;
    }

    * html # outer {height: 100%;}
    # Header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: # 304a00;
    overflow: hidden;
    color: white;
    text-align: center;
    }

    # footer {
    position: relative;
    margin-top:-50px;
    clear: both;
    width: 100%;
    height: 50px;
    background-color: # 304a00;
    color: white;
    text-align: center;
    }
    . Outerwrap {
    float: left;
    width: 100%;
    padding-top: 71px;
    }

    Цей файл слід зберегти з ім’ям, яке ми вказали в html-коді сторінки — styles.css.


ЯкПросто