Разработка сайтов, создание сайтов
главная / CSS / Прижимаем футер к низу с помощью CSS

Прижимаем футер к низу с помощью CSS

Итак, задача. Нужно прижать футер к низу без таблиц, без ява скрипта, только с помощью css. Давайте посмотрим, как это делается.

На самом деле всё очень просто. Ниже представлен код с комментариями. Думаю здесь всё понятно.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижимаем футер к низу с помощью css</title>
<style type="text/css">
html, body{
padding:0;
margin:0;
height:100%; /* Задаём 100% высоту для html и body */
position:relative; /* Если этого не задать, в Опере почему-то футер не прижимается сразу,
прижимается только после ресайза окна, какой-то странный глюк*/
}
#container{
background:#CCC; /* Просто, чтобы было видно контейнер */
min-height:100%; /* Задаем минимальную высоту 100% */
_height:100%; /* Задаем высоту 100% в ИЕ6 с помощью хака */
}
#main{
padding-bottom:50px; /* Задаём нижний отступ, равный высоте футера, можно задать и больше,
но главное, чтобы не было меньше, иначе футер налезет на контент*/
}
#footer{
background:#36F;
height:50px; /* высота футера */
margin-top:-50px; /* отрицательный маргин, равный высоте футера */
position:relative; /* Чтобы футер "всплыл" из под дива #container, если этого не сделать,
то ссылки в футере не кликабельны и нельзя выделить текст*/
}
</style>
</head>
<body>
<div id="container">
<div id="main">
Счастье – это когда есть всё: от А до Футер. Вот и появились первые упоминания о Футер в наших беседах.
Правда это было достигнуто не с использованием бубна, набора напильников и чтения мантр, а просто вы набрали слово «Футер»,
но все же результат оказался впечатляющим. На место Сократа я не претендую, но все-таки считаю, что Футер – это и есть смысл жизни человека.
Впервые увидев Футер, понимаешь: рай бывает не только утраченным, но и обретенным. Футер – это совершенный выбор.
Часто владелец компании забывает, что для повышения лояльности работников важен набор не только материальных стимулов, но и моральных.
Подводя итоги в конце отчетного периода, устраивайте конкурсы, например, «Лучший Футер». Это все создает внутренний PR.
Недавно в и-нете был анонсирован новый проект. Люди так красиво расписали свою идею: борьба с совком, жалобы, претензии и т.д.
Захожу я на проект и вижу на их рекламном баннере Футер... Все, чтобы ни происходило с вами в жизни, принимайте, как Футер,
который вы даете сами себе. Футер холодный, а душу греет. Вот, например, художники. Они проводят месяц, рисуя синий Футер,
поскольку именно эти картины знаменитые коллекционеры покупают в этом сезоне, а следующий месяц проводят, рисуя красный Футер,
потому что вообще-то презирают синий цвет и любят красный. А вот «Ретуф» – это Футер наоборот.
&copy; Генератор светских бесед
</div>
</div>
<div id="footer">
&copy; Прижимание футера к низу
</div>
</body>
</html>


Источник: html-css.info
текущее:

НОВОСТИ

2011 г., «VisMech.ru»