? ЯК притиснути footer до низу :: ПЗ

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

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

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

Інструкція

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

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

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

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

Footer сторінки.

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

Збережіть у файл з розширенням html повний код сторінки-зразка. Він може виглядати, наприклад, так:

Притиснутий footer

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

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-

}