Сен

И снова футер внизу экрана

CSS, footer, html, IE, meta, php, pr, бот, жк, контент, разработка, ремонт, сайт, футер, центр, экран

В этой заметочке код представлен только для сайтов, где заведомо известно, что он не растянется по высоте. Поэтому тот код на универсальность не претендует. Однако, свою задачу отрабатывает.

Сейчас же я хочу предложить вам код, который стабильно держит футер внизу Вчера на поиски оптимального решения ушло 3(!) часа. Но в конце-концов результат был найдет!

Сорри, забыл автора. Если автор найдется – с удовольствием поставлю копирайт!

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Прижатие footer к низу экрана/контента</title>

<style type="text/css" media="all">

* {
margin: 0;
padding: 0;
border: 0;
font-size: 100.01%;
}

html {
/*------------ 100% высота контейнера div.page далее */
height: 100%;
/*------------*/
background: #fab0b0;
}

body {
/*--------------- 100% высота контейнера div.page далее */
min-height:100%;
height: 100%;
/*---------------*/
background: #fafab0;
color: #000;
font-weight: normal;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
}

/* Контейнер всего содержимого кроме подвала */
div.page {
width: 760px;
margin: auto;

/*----------------------- 100% высоты контейнера относительно клиентской области и контента для IE, FF, Opera */
height: auto !important;
min-height:100%;
height: 100%;
/*-----------------------*/
background: #f0f0f0;
}

/* блок гарантирующий, что область на коотрую накладывается div.footer в div.page останется пустой, */
/* наличие этого блока устанавливает высоту div.page 100% относительно клиентской области и контента в FF, Opera */
div.page div.footer_guarantor {
height: 40px;
clear: both;
border: 1px dashed #666;
text-align: right;
color: #999;
}

/* Контейнер подвала */
div.footer {
margin: auto;
margin-top: -40px;
width: 760px;
height: 40px;
clear: both;
background: #b0f0f0;
}

/* Контейнер шапки */
div.page div.header {
height: 180px;
background: #f0a060;
}

/* Патч для установки минимальной высоты в IE */
div.page div.patch_minheight {
width: 1px;
height: 250px;
float: right;
}

/* Контейнер вспомогательной полосы */
div.page div.sidebar {
width: 180px;
float: left;
background: #b0f0b0;
}

/* Контейнер основной полосы */
div.page div.mainbar {
width: 580px;
overflow: hidden;
float: left;

background: #b0b0f0;
}
</style>
</head>
<body>
<div class="page">
<div class="header"><h1>Header</h1>
<br />
<h2>Дано:</h2>
<ul style="list-style: none;">
<li>  - фиксированная ширина контента 760px по центру;</li>
<li>  - шапка 180px в высоту;</li>
<li>  - вспомогательная колонка 180px в ширину, минимальная высота 250px;</li>
<li>  - основная полоса 580px в ширину, минимальная высота 250px;</li>
<li>  - подвал 40px в высоту, всегда прижат к низу экрана.</li>
</ul>
</div>
<div class="sidebar"><h1>Sidebar</h1>
<div class="patch_minheight"></div>
<br />
<h2>Блоки:</h2>
<ul style="list-style: none;">
<li>  <span style="background-color:#fab0b0; border: 1px solid #000;">    </span> - html</li>
<li>  <span style="background-color:#fafab0; border: 1px solid #000;">    </span> - body</li>
<li>  <span style="background-color:#f0f0f0; border: 1px solid #000;">    </span> - div.page</li>
<li>  <span style="background-color:#f0a060; border: 1px solid #000;">    </span> - div.header</li>
<li>  <span style="background-color:#b0f0b0; border: 1px solid #000;">    </span> - div.sidebar</li>
<li>  <span style="background-color:#b0b0f0; border: 1px solid #000;">    </span> - div.mainbar</li>
<li>  <span style="background-color:#f0f0f0; border: 1px dashed #000;">    </span> - div.footer_guarantor</li>
<li>  <span style="background-color:#b0f0f0; border: 1px solid #000;">    </span> - div.footer</li>
</ul>
</div>
<div class="mainbar"><h1>Mainbar</h1>
<div class="patch_minheight"></div>
<br />
<i>Блок <b>footer_guarantor</b> служит для гарантии того, что подвал не наедет на контент основной или вспомогательной полосы.</i>
<br />
<br />
<i>Нерегулярно может наблюдаться <b>глюк</b> отлипания подвала от нижней границы окна при уменьшении размеров окна и последующем скролинге вниз в броузере Opera; исчезает после перезагрузки страницы (данный баг считаю сугоболичной проблемой Opera и считаю бессмысленным бороться над его исправлением, глумлясь над версткой; подобный глюк автор наблюдал на схожих решениях с вресии 7.54).</i>
<br />
<br />
<i>Проверено в IE 6.0, FF 1.5, Opera 9.01</i>
</div>
<div class="footer_guarantor"><h1>Footer guarantor</h1></div>
</div>
<div class="footer"><h1>Footer</h1>
</div>

</body>
</html>

Грамотная разработка сайта. Высококвалифицированные сотрудники, индивидуальный подход
Быстрая укладка паркетной доски в Мытищах – отличное решение для ремонта квартиры
Мода развивается по спирали. Сегодня стрижки средней длины опять набирают популярность

И снова футер внизу экрана

Прокомментировать

Рубрики

Облако меток

В прямом эфире