Як притиснути футер

Як притиснути футер

«Футером» зазвичай називають найнижчий блок зверстаної веб-сторінки. Найбільш поширена труднощі позиціонування цієї підвальній частині — змусити її завжди розміщуватися на нижній межі вікна незалежно від ступеня заповненості сторінки і типу браузера. Рішень проблеми з часів масового переходу на блочну верстку придумано досить багато і одне з них наведено нижче.

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

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

Інструкція

  1. За основу візьмемо найбільш поширену схему розмітки сторінки — три блоки, розміщених один над іншим. Верхній (header) завжди повинен бути притиснутий до верхньої межі вікна, нижній (footer) — до нижньої межі, а основний (body) повинен завжди заповнювати весь простір між ними. У вихідному коді обов’язково має бути посилання на специфікацію XHTML 1.0 Transitional, а опис стилів повинно бути обов’язково поміщено у зовнішній CSS-файл (для виключення проблем з Opera 9.XX).

    В основне тіло сторінки потрібно помістити HTML-опис структури. Починатися воно буде, звичайно, з верхнього блоку, в тег якого повинен бути поміщений атрибут ідентифікатора зі значенням, наприклад, divHead:

    <div id=»divHead»>

     Заголовний блок.

    </ Div>

    Основний блок повинен складатися з пари вкладених одна в іншій блоків. Зовнішньому дамо ідентифікатор divOut, а внутрішнього — divContent:

    <div id=»divOut»>

     <div class=»divContent»>

     Основний контент.

     </ Div>

    </ Div>

    Футер привласнимо ідентифікатор divFoot:

    <div id=»divFoot»>

     Підвал сторінки.

    </ Div>
  2. Повний HTML-код сторінки повинен виглядати так:

    <! DOCTYPE html PUBLIC «- / / W3C / / DTD XHTML 1.0 Transitional / / EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd»>

     <head>

     <title> Три блоки </ title>

    <style media=»all» type=»text/css»> @ import «style.css»; </ style>

     <meta content=»text/html; charset=windows-1251″ http-equiv=»Content-Type» />

    </ Head>

    <body>

    <div id=»divHead»>

     Це заголовний блок.

    </ Div>

    <div id=»divOut»>

     <div class=»divContent»>

     Основний контент.

     </ Div>

    </ Div>

    <div id=»divFoot»>

     Це підвал сторінки.

    </ Div>

    </ Body>

    </ Html>
  3. Опис стилів реалізує такий механізм розмітки: середньому блоку (divOut) задана висота 100%, верхній блок (divHead) матиме абсолютне позиціонування, а нижній — відносне. У блоці основного контенту (divContent) повинно бути залишено вільний простір зверху, рівне висоті заголовкового блоку, щоб той не перекривав основний вміст сторінки. А нижній блок (футер) повинен мати зверху негативний відступ, рівний висоті цього блоку. Так він буде піднятий над нижньою межею вікна браузера. Реалізувати цей механізм можна з допомогою css-файлу такого змісту:

    * {Margin: 0; padding: 0}

    html, body {height: 100%;}

    body {

     position: relative;

     color: # 000;

    }

    # DivOut {

     margin: 0;

     min-height: 100%;

     background: # FFF;

     color: # 000;

    }

    * Html # divOut {height: 100%;}

    # DivHead {

     position: absolute;

     left: 0;

     top: 0;

     width: 100%;

     height: 80px;

     background: # 2F5000;

     overflow: hidden;

     text-align: center;

     color: # FFF;

    }

    # DivFoot {

     position: relative;

     clear: both;

     margin-top:-60px;

     height: 60px;

     width: 100%;

     background-color: # 2F5000;

     text-align: center;

     color: # FFF;

    }

    . DivContent {

     width: 100%;

     float: left;

     padding-top: 81px;

    }

    Зазначене вами в HTML-коді ім’я для файлу стилів — style.css.