Як притиснути footer до низу - інше - 2019

Anonim

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

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

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

Інструкція

1

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

2

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


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


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


Footer сторінки.

3

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

4

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


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


Footer сторінки.

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;
}