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

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

Самий нижній горизонтальний блок зверстаної сторінки часто називають «футером» (footer). У ньому, як і в інших блоках сторінки, розміщуються елементи дизайну, але на відміну від інших з позиціонуванням саме цього блоку найчастіше виникають специфічні проблеми. Пов’язані вони з тим, що різні браузери по-різному розуміють стандарти мови CSS і буває досить важко змусити футер перебувати у нижнього краю вікна браузера. Нижче наведено код одного з варіантів вирішення цієї проблеми.

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

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

Інструкція

  1. Помістіть в самій першому рядку вихідного коду сторінки вказівку на специфікацію XHTML 1.0 Transitional:

    <! DOCTYPE html PUBLIC «- / / W3C / / DTD XHTML 1.0 Transitional / / EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd»>
  2. Додайте всередині тіла документа (між тегами <body> і </ body>) основні блоки структури сторінки. Блок, у який буде поміщений основний контент, повинен складатися з двох вкладених шарів. Наприклад, зовнішній нехай має ідентифікатор OuterDiv, а внутрішній — InnerDiv:

    <div id=»OuterDiv»> <div class=»InnerDiv»>

     Тут буде основний контент сторінки.

    </ Div> </ div>

    За ними розмістіть блок футера з ідентифікатором, наприклад, FooterDiv:

    <div id=»FooterDiv»>

     Footer сторінки.

    </ Div>
  3. Помістіть в заголовну частину HTML-коду (між тегами <head> і </ head>) посилання на зовнішній файл з описом css-стилів:

    <style media=»all» type=»text/css»> @ import «footerStyle.css»; </ style>
  4. Збережіть в файл з розширенням html повний код сторінки-зразка. Він може виглядати, наприклад, так:

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

     <head>

     <title> Притиснутий footer </ title>

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

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

    </ Head>

    <body>

    <div id=»OuterDiv»> <div class=»InnerDiv»>

     Тут буде основний контент сторінки.

    </ Div> </ div>

    <div id=»FooterDiv»>

     Footer сторінки.

    </ Div>

    </ Body>

    </ Html>
  5. Створіть файл стилів — звичайний текстовий файл, який слід зберегти з розширенням css, і ім’ям, зазначеним вами в HTML-коді (footerStyle.css). Запишіть у цей файл такі описи стилів для блоків, використаних в сторінку:

    * {Margin: 0; padding: 0}

    html, body {height: 100%;}

    body {

     position: relative;

     color: # 222222;

    }

    # OuterDiv {

     margin: 0;

     min-height: 100%;

     background: # aaaaaa;

     color: # 222222;

    }

    * Html # OuterDiv {height: 100%;}

    # FooterDiv {

     position: relative;

     clear: both;

     margin-top:-60px;

     height: 60px;

     width: 100%;

     background-color: DarkBlue;

     text-align: center;

     color: # eeeeff;

    }

    . InnerDiv {

     width: 100%;

     float: left;

    }