Вам понадобится
  • Начальные знания CSS и HTML
Инструкция
1
В качестве образца возьмем одну из наиболее типичных схем разбивки страницы - у нее будет «чердак» (заголовок), основной блок и «подвал». Конечно, при необходимости, в основной блок можно поместить несколько колонок, но здесь мы этого делать не будем, сосредоточимся только не позиционировании футера.HTML-код страницы будет начинаться с объявления спецификации:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">Между тегами <head> и </head>, кроме заголовка страницы, разместим указание кодировки:<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />А также ссылку на внешний CSS-файл, содержащий описание стилей:<style type="text/css" media="all">@import "styles.css";</style>Помещать описание стилей непосредственно в html-код страницы мы не будем, чтобы избежать осложнений с браузером Opera девятых версий.Между тегами <body> и </body> разместим блочную структуру страницы. Первым, естественно, блок заголовка. Ему дадим идентификатор header, чтобы иметь возможность задавать стили именно для этого блока:<div id="header">
Это header - всегда вверху окна.
</div>Затем - основной блок страницы. Он будет состоять из двух вложенных друг в друга - внешнего (идентификатор - outer) и внутреннего (идентификатор - outerwrap):<div id="outer">
<div class="outerwrap">
Это основная часть.
</div>
</div>И в завершение - футер:<div id="footer">
Это footer - всегда внизу окна!
</div>Вся страница в сборе будет выглядеть так:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<head>
<title>Как прижать футер</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css" media="all">@import "styles.css";</style>
</head><body><div id="header">
Это header - всегда вверху окна.
</div><div id="outer">
<div class="outerwrap">
Это основная часть.
</div>
</div><div id="footer">
Это footer - всегда внизу окна!
</div></body>
</html>
2
Теперь перейдем к содержимому файла стилей. В нем реализована такая схема: основному блоку страницы будет задана 100% высота, заголовок будет позиционирован абсолютно, а футер - относительно. Чтобы заголовок не перекрывал основное содержание страницы, это основное содержание помещено в дополнительный блок внутри основного блока, и этому дополнительному блоку задан отступ сверху, равный высоте блока заголовка. А футеру задан отрицательный отступ сверху, равный его высоте - таким способом он будет поднят над нижней кромкой окна на всю свою высоту. Полное содержимое css-файла:* {margin: 0; padding: 0}
html, body{height: 100%;} body {
color: black;
position: relative;
}
#outer{
min-height: 100%;
margin: 0;
background: white;
color: black;
}* html #outer{height: 100%;}
#header{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #304a00;
overflow: hidden;
color: white;
text-align: center;
}#footer {
position: relative;
margin-top: -50px;
clear: both;
width: 100%;
height: 50px;
background-color: #304a00;
color: white;
text-align: center;
}
.outerwrap {
float: left;
width: 100%;
padding-top: 71px;
}Этот файл следует сохранить с именем, которое мы указали в html-коде страницы - styles.css.