Как прижать футер?

2 ноября 2014 г. Просмотров: 499 Инструкции
«Футером» обычно называют самый нижний блок сверстанной веб-страницы. Наиболее распространенная трудность позиционирования этой подвальной части - заставить ее всегда размещаться на нижней границе окна независимо от степени заполненности страницы и типа браузера. Решений проблемы со времен массового перехода на блочную верстку придумано достаточно много и одно из них приведено ниже.
Создать сайт самостоятельно с Wix.com

Вам понадобится

  • Начальные знания CSS и HTML

Инструкция

  • За основу возьмем наиболее распространенную схему разметки страницы - три блока, размещенных один над другим.
    Верхний (header) всегда должен быть прижат к верхней границе окна, нижний (footer) - к нижней границе, а основной (body) должен всегда заполнять все пространство между ними. В исходном коде обязательно должна быть ссылка на спецификацию XHTML 1.0 Transitional, а описание стилей должно быть обязательно помещено во внешний CSS-файл (для исключения проблем с Opera 9.XX).В основное тело страницы надо поместить HTML-описание структуры. Начинаться оно будет, конечно, с верхнего блока, в тег которого должен быть помещен атрибут идентификатора со значением, например, divHead:
  • Заголовочный блок.

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

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

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

    Подвал страницы.

  • Полный HTML-код страницы должен выглядеть так:
  • Три блока

    @import "style.css";

    Это заголовочный блок.

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

    Это подвал страницы.

  • Описание стилей реализует такой механизм разметки: среднему блоку (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.

    Оцените статью!