Нижний колонтитул — в нижней части страницы

Кросс-браузерный метод, реализующий 100% высоту страницы с помещением нижнего колонтитула в нижнюю часть экрана

С каждым годом мониторы становятся всё больше и больше; как следствие, растёт и разрешение экрана. И страницы с небольшим количеством контента на таких мониторах смотрятся некрасиво — особенно, когда нижний колонтитул (aka подвал aka footer) плавает где-то в верхней части экрана Многие сайты решают эту проблему при помощи табличной верстки (<table height="100%">) с теми или иными вариациями. [...]

← Вернуться к полной версии записи «Нижний колонтитул — в нижней части страницы»…

Вложения:

Пример №2 — много текста (text/html)
Пример №1 — мало текста (text/html)

Автор: Vladimir; опубликовано в: CSS; метки: CSS, HTML, WAI, WCAG, XHTML, макет, разметка, футер

12
Мар
2008

Комментарии к статье «Нижний колонтитул — в нижней части страницы» (24) »

Легко изменяемый макет фиксированной ширины | Ars Longa, Vita Brevis

Март 18, 2008 в 18:26

[...] необходимо разместить нижний колонтитул в нижней части экрана, то все колонки нужно завернуть еще в один <div>. [...]

Ответить
Размещение блока неизвестного размера в центре страницы при помощи CSS | Ars Longs, Vita Brevis

Апрель 1, 2008 в 09:45

[...] Нижний колонтитул — в нижней части страницы; [...]

Ответить
Vladimir

Май 7, 2008 в 05:24

По последним данным (с тех пор, как у меня появился Konqueror), правило html { overflow: auto; } нужно делать видимым только для IE. В противном случае Konqueror 3.5.9 (на K4 еще не тестировал) некорректно отображает страницу (появляется еще одна вертикальная полоса прокрутки по высоте окна (последствия height: auto; min-height: 100%) , а “основная” полоса прокрутки не скрывается, а работает так, как если бы контент отображался по всей высоте).

Ответить
Кросс-браузерный резиновый трёхколоночный макет в высоту окна | Ars Longa, Vita Brevis

Июнь 29, 2008 в 23:49

[...] переходим к 100% высоте. Помним, что Konqueror/KHTML имеет свою точку зрения по поводу того, кто задаёт скроллинг; также не [...]

Ответить
Роман

Сентябрь 9, 2008 в 05:12

А что делать, если все элементы страницы имеют абсолютное позиционирование? Тогда ваш способ не работает.

Ответить
Vladimir

Сентябрь 9, 2008 в 06:44

Роман, этот как? Можно прмер, пожалуйста?

Вообще, если у Вас #content спозиционирован абсолютно, и при этом Вы не задали ему высоту, то, возможно, Вам стоит подумать о рефакторинге дизайна На мой взгляд, использование абсолютного позиционирования везде, где только можно — это не есть хорошо.

Ответить
Chaika

Октябрь 15, 2008 в 14:08

Хочу предложить вам не плохой способ для прижатия футера. Он находиться здесь, там есть примеры и коментарии к коду.

Ответить
Сергей

Октябрь 22, 2008 в 09:21

При добавлении во второй пример текста (так чтобы он занимал больше видимой области экрана) нижний колонтитул (aka подвал aka footer) плавает где-то в верхней части экрана
Firefox 2.0.0.14

Ответить
Vladimir

Октябрь 22, 2008 в 14:23

Сергей, Вы первый, кто это заметил, спасибо. Причина заключается в моей невнимательности — я забыл добавить position: relative в объявление #container (29 строка). А в самой статье разметка правильная.

Ответить
Denver

Ноябрь 22, 2008 в 20:59

я вродибы хтмл харашо знаю, но и автор вроди как не глупый, обьясните что за * {…} и html > body. интерисует звездочка (и к чему тогда стиль применяется) и знак “>” что значит?

Ответить