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

«Футером» обычно называют самый нижний блок сверстанной веб-страницы. Наиболее распространенная трудность позиционирования этой подвальной части - заставить ее всегда размещаться на нижней границе окна независимо от степени заполненности страницы и типа браузера. Решений проблемы со времен массового перехода на блочную верстку придумано достаточно много и одно из них приведено ниже.
Создать сайт самостоятельно с 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.

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