футер, прижатый к низу

@Hagrael · Регистрация: 07.01.2010

Студворк — интернет-сервис помощи студентам

Вот такая задача: сделать так, чтобы футер был прижат к низу даже при скроллировании. Если указать position: fixed, то в IE6 & IE7 не будет позиционироваться, видел где-то как это сделать, там было что-то на подобие:

CSS
1
2
3
4
5
6
7
8
#footer {
    position: fixed;
    bottom: 0px;
}
* html #footer {
    position: absolute;
    top: expression(...);
}

Что в expression было не помню только.

@4umYOUser · 10.10.2010, 17:08

достаточно просто вставить между контейнером и футером clear:both, например:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.container {
    width:1000px;
    height:1000px;
    background:#CCC;
}
.clear {clear:both;}
.footer {
    width:1000px;
    height:100px;
    background:red;
}
</style>
<div class="container">
</div>
<div class="clear"></div>
<div class="footer">
</div>

при этом клир и футер должны быть за границами контейнера

@Hagrael · 10.10.2010, 18:13 **[ТС]**

4umYOUser, вы не поняли моей задумки. Мне надо, чтобы футер был постоянно прижат к низу окна браузера.

@fatima430 · 11.10.2010, 04:42

Сообщение от Hagrael

4umYOUser, вы не поняли моей задумки. Мне надо, чтобы футер был постоянно прижат к низу окна браузера.

вот может это подойдет [Ссылка удалена!]

Статья с ссылки

Данный урок является как-бы логическим продолжением урока "блочная верстка(div верстка сайтов) " . При своем рассказе я рассчитываю на читателя(слушателя), уже ознакомленного с материалами предыдущего урока.

Итак, как Вы знаете, блочный макет сайта обычно состоит из шапки, подвала и двух или трех колонок текста. Так вот, подвал сайта(футер) , в обычном стандартном макете , при условии, что на странице мало контента, прижимается кверху, ну примерно так:

Хотя по логике вещей, раз это подвал, то он должен всегда находиться в нижней части экрана, независимо от того, сколько контента на странице. Т.е. вот так:

Так вот, именно решению вопроса "Как прижать футер к низу страницы" и посвящен данный урок.

Суть решения данного вопроса заключается в том, что подвал, он же футер, выносится за пределы общего контейнера. А на его место ставится пустой блок DIV, высота которого, в точности совпадает с высотой футера. Затем футер смещается вверх, как бы накладываясь на этот пустой блок. Смещение футера происходит с помощью отрицательного отступа сверху .

Рассмотрим общую структуру страницы. Я не буду приводить всего кода, приведу только основные правила, которые помогут понять суть, а промежуточные - упущу.

HTML код:

HTML5
1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="right"</div>
<div id="content"></div>
<div id="clear"></div>
<div id="rasporka"></div>
</div>
<div id="footer"</div>

Как видите из кода, футер выносится за пределы блока контейнер, а на его место ставится пустой блок - распорка.

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
html,body {
height:100%
margin:0;
padding:0;
}
#container{
width:800px;
margin:0 auto;
min-height:100%;
}
* html #container{
height:100%;
}
#left {
width:150px; 
float:left; 
}
#right{
width:100px; 
float:right; 
}
#content{
margin-left:152px; 
margin-right:102px;
}
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
#rasporka{
height:40px;
}
#footer{
height:40px;
margin-top:-40px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:800px;
}

Первым делом, задаем 100% высоту тела документа, чтобы можно было растянуть блок контейнер. Затем для блока #container задаем минимальную высоту 100% (mi-height:100%) . Однако I.E. 6.0 не понимает данное правило, поэтому для него пишем специальный хак.

CSS
1
2
3
* html #container{
height:100%;
}

Пустому блоку распорке (#rasporka), задаем такую же высоту, как и футеру, а сам футер, смещаем вверх, с помощью отрицательного отступа margin-top: -40px;

Вот так. Надеюсь у Вас все получится. Также, я записал видео-подсказку, в которой все пошагово подробно объясняю . Видео можно скачать, а можно посмотреть прямо с сайта. Удачи!
Источник

@Hagrael · 11.10.2010, 15:27 **[ТС]**

fatima430, интересная статья, спасибо, это помогло с одной вариацией, и у меня по статье только один вопрос: отрицательный margin-top - это разве не зло? По-моему, его использовать не очень рационально. Но остался ещё один вопрос (которому я и посвятил тему) - как сделать так, чтобы футер постоянно был прижат, при прокручивании страницы и т. д. и т. п. В общем, есть такой код:

CSS
1
2
3
4
#footer {
    position: fixed;
    bottom: 0px;
}

Футер будет прижат даже при прокручивании, но не в IE6 (мб и в IE7 тоже, но не уверен), он не понимает значения fixed, для IE6 где-то видел хак, но не помню, где =( И прошу помочь.

@romchiksoad · 12.10.2010, 07:12

Hagrael, Вы об этом?

fixed в IE6

Так как IE6 не поддерживает значение fixed свойства position, обычно для эмуляции данного эффекта используют position:absolute и CSS expression. Однако в результате при скроллинге или изменении размеров окна браузера возникали небольшие подёргивания фиксированного блока.

CSS
1
2
3
4
5
6
7
8
9
#fixed{
  position:fixed;
  left:0;
  top:0
}
#fixed{ /* Стили для IE6 */
  position:absolute;
  top:expression(eval(document.documentElement.scrollTop))
}

Видимо IE имеет несколько этапов рендеринга страницы. Сначала браузер заново перестраивает содержимое и уже после обрабатывает CSS выражения, что и приводит к подёргиваниям.

Решение заключается в том, чтобы добавить элементу html или body фоновое изображение. В результате браузер сперва обработает таблицу стилей, а после перерисует страницу. Это, в свою очередь, сделает перемещение фиксированного блока плавным.

В качестве значения background можно использовать about:blank.

CSS
1
2
3
html{
  background:url(about:blank)
}

Источник

@Hagrael · 12.10.2010, 14:18 **[ТС]**

romchiksoad, да, спасибо, а что значит eval и background: url(auto:blank)?

@ValeryB · 13.10.2010, 00:09

Делал я у себя фиксированный в нижней части футер. Но возникают проблемы с фотогалереей.
Для того, чтобы футер был сверху контента и перекрывал его вывод задавал больший z-index.
Но при распахивании фото на всю величину экрана нижняя часть окошка фото попадает под футер.
И если там элементы управления, то они становятся недоступны. Надо лезть в код галереи и првить там.

@RedMirage · 13.10.2010, 22:53

Вот хороший пример прижатого футера. Избитая тема, куча решений.
[Ссылка удалена!]

Статья с ссылки

Фиксированный подвал

Опубликовано: 08.10.2010

Влад Мержевич

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

Для этого воспользуемся свойством position и его значением fixed. При этом элемент остается на одном месте, а его положение задается координатами через свойства top, right, bottom, left. В нашем случае достаточно задать нулевые значения у left и bottom. Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).

Пример 1. Фиксированный подвал

HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Фиксированный подвал</title>
  <style type="text/css">
   #content {
    width: 500px; /* Ширина слоя */
    margin: 0 auto 50px; /* Выравнивание по центру */
   }
   #footer {
    position: fixed; /* Фиксированное положение */
    left: 0; bottom: 0; /* Левый нижний угол */
    padding: 10px; /* Поля вокруг текста */
    background: #39b54a; /* Цвет фона */
    color: #fff; /* Цвет текста */
    width: 100%; /* Ширина слоя */
   }
  </style>
 </head>
 <body>
  <div id="content">
   Все перечисленные на сайте методы ловли льва являются теоретическими 
   и базируются на вычислительных методах. Автор не гарантируют 
   вашей безопасности при их использовании и снимает с себя всякую 
   ответственность за результат. 
   Помните, лев это хищник и опасное животное! 
  </div>
  <div id="footer">
   &copy; Влад Мержевич
  </div>
 </body>
</html>

Результат примера показан на рис. 1.

Браузер Internet Explorer 6 не поддерживает значение fixed, поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами <div>, вложив их внутрь контейнеров #content и #footer, а также включить еще один стиль специально для этого браузера (пример 2).
Пример 2. Код с учетом IE6

HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Фиксированный подвал</title>
  <style type="text/css">
   body {
    margin: 0; /* Убираем отступы на странице */
   }
   #content {
    width: 500px; /* Ширина слоя */
    margin: 0 auto 50px; /* Выравнивание по центру */
   }
   #footer {
    position: fixed; /* Фиксированное положение */
    left: 0; bottom: 0; /* Левый нижний угол */
    color: #fff; /* Цвет текста */
    width: 100%; /* Ширина слоя */
   }
   #footer div {
    padding: 10px; /* Поля вокруг текста */
    background: #39b54a; /* Цвет фона */
   }
  </style>
  <!--[if lte IE 6]>
  <style type="text/css">
   html, body, #container {
    height: 100%; /* Высота страницы */
    overflow: hidden; /* Обрезаем все, что не помещается в окно */
   }
   #container {
    overflow: auto; /* Добавляем полосы прокрутки */
   }
   #footer {
    position: absolute; /* Абсолютное позиционирование */
   }
   #footer div {
    margin-right: 17px; /* Смещаяем фон, чтобы не накладывался на скролбар */
   }
  </style>
  <![endif]--> 
 </head>
 <body>
  <div id="container">
   <div id="content">
    Все перечисленные на сайте методы ловли льва являются теоретическими 
    и базируются на вычислительных методах. Автор не гарантируют 
    вашей безопасности при их использовании и снимает с себя всякую 
    ответственность за результат. 
    Помните, лев это хищник и опасное животное! 
   </div>
  </div>
  <div id="footer">
   <div>
    &copy; Влад Мержевич
   </div>
  </div>
 </body>
</html>

В данном примере используется значение absolute свойства position. При абсолютном позиционировании элемент можно поместить в любое место окна браузера, но при этом он прокручивается вместе с содержимым. В этом основное различие между значениями fixed и absolute. Чтобы подвал не перемещался, задается высота страницы как 100% и отсекается все, что не помещается в текущие размеры окна. При этом пропадает вертикальная полоса прокрутки, ее следует добавить к #content с помощью overflow.

Еще один неприятный момент это наложение фона подвала на полосу прокрутки, так что придется задать отступ справа на ширину скролбара. При этом, если полосы прокрутки нет, в подвале справа будет зиять дыра.
Источник

@Hagrael · 14.10.2010, 12:33 **[ТС]**

RedMirage, не очень хорошая статья ИМХО. Лучше решить так:

CSS
1
2
3
4
5
6
7
8
9
10
11
html {
    height: 100%;
}
#footer {
    position: fixed;
    bottom: 0px;
}
* html #footer {
    position: absolute;
    top: expression(document.documentElement.scrollTop+document.documentElement.clientHeight-50+"px");
}

Вроде тогда html примет высоту рабочей части браузера, и мы её прибавим к скроллированию, то получим как раз самый низ, далее вычитаем высоту футера.

@Hagrael · 17.10.2010, 09:01 **[ТС]**

И ещё один вариант:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container {
            min-height: 100%;
            position: relative;
        }
        #footer_conteiner {
            height: 40px;
        }
        #footer {
            position: absolute;
            bottom: 0px;
            height: 40px;
            background: green;
            text-align: center;
            padding-top: 3px;
            width: 100%;
        }

HTML5
1
2
3
4
5
<div id="container">
    <div id="footer_conteiner">
        <div id="footer">lol</div>  
    </div>
</div>

Добавлено через 40 секунд
Оказывается, что body растягивается на всю высоту браузера, следовательно у контейнера можно поставить min-height.

Добавлено через 3 минуты
И никаких отрицательных margin-top'ов.

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	10.10.2010, 18:13 [ТС]
	4umYOUser, вы не поняли моей задумки. Мне надо, чтобы футер был постоянно прижат к низу окна браузера. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	12.10.2010, 14:18 [ТС]
	romchiksoad, да, спасибо, а что значит eval и background: url(auto:blank)? 0

@ValeryB 633 / 376 / 7 Регистрация: 25.05.2010 Сообщений: 1,372
	13.10.2010, 00:09
	Делал я у себя фиксированный в нижней части футер. Но возникают проблемы с фотогалереей. Для того, чтобы футер был сверху контента и перекрывал его вывод задавал больший z-index. Но при распахивании фото на всю величину экрана нижняя часть окошка фото попадает под футер. И если там элементы управления, то они становятся недоступны. Надо лезть в код галереи и првить там. 0