Как прижать footer к низу?

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

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

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

Инструкция

Поместите в самой первой строке исходного кода страницы указание на спецификацию XHTML 1.0 Transitional:

Разместите внутри тела документа (между тегами и ) основные блоки структуры страницы. Блок, в который будет помещен основной контент, должен состоять из двух вложенных слоев. Например, внешний пусть имеет идентификатор OuterDiv, а внутренний - InnerDiv:

Здесь будет основной контент страницы.

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

Footer страницы.

Поместите в заголовочную часть HTML-кода (между тегами и ) ссылку на внешний файл с описанием css-стилей:@import "footerStyle.css";

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

Прижатый footer

@import "footerStyle.css";

Здесь будет основной контент страницы.

Footer страницы.

Создайте файл стилей - обычный текстовый файл, который следует сохранить с расширением 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;

}

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