Вам понадобится
  • Начальные знания CSS и HTML
Инструкция
1
Поместите в самой первой строке исходного кода страницы указание на спецификацию XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
2
Разместите внутри тела документа (между тегами <body> и </body>) основные блоки структуры страницы. Блок, в который будет помещен основной контент, должен состоять из двух вложенных слоев. Например, внешний пусть имеет идентификатор OuterDiv, а внутренний - InnerDiv:
<div id="OuterDiv"><div class="InnerDiv">

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

</div></div>
За ними разместите блок футера с идентификатором, например, FooterDiv:
<div id="FooterDiv">

Footer страницы.

</div>
3
Поместите в заголовочную часть HTML-кода (между тегами <head> и </head>) ссылку на внешний файл с описанием css-стилей:
<style media="all" type="text/css">@import "footerStyle.css";</style>
4
Сохраните в файл с расширением html полный код страницы-образца. Он может выглядеть, например, так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">

<head>

<title>Прижатый footer</title>

<style media="all" type="text/css">@import "footerStyle.css";</style>

<meta content="text/html; charset=windows-1251" http-equiv="Content-Type" />

</head>
<body>
<div id="OuterDiv"><div class="InnerDiv">

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

</div></div>
<div id="FooterDiv">

Footer страницы.

</div>
</body>

</html>
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;

}