Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »
Как прижать футер к низу страницы (руководство к действию) (страница комментариев 4)
26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
66 комментариев на «Как прижать футер к низу страницы (руководство к действию)»
Chenja (1 комментарий)
Здравствуйте, Юлия. Использовала ваш метод весьма успешно, пока не столкнулась с одной проблемой. При изменении ширины окна футер также меняет свою ширину, а вот обертка контента остается прежней и появляется нижняя полоса прокрутки. В итоге футер оказывается равен ширине окна,но меньше ширины страниц. Как можно сделать так, чтобы ширина body и, соответственно, футера принимала ширину страницы, определяемой контентом,а не ширину окна?
Княгиня (660 комментариев)
Заочно не ясно, как это у вас выглядит. Проблема с шириной может возникать, если ширина сайта больше ширины окна; у правильно свёрстанного сайта такого быть не должно. (Хотя бывают такие админ или контент-менеджеры, которые способны неправильным наполнением изуродовать самый дуракоустойчивый шаблон.)
Евгения (1 комментарий)
Все получилось, но стрелка «Наверх» исчезает под футером((
Княгиня (660 комментариев)
Стрелка не в контентной области? Если нет, просто сделайте ей z-index побольше. А если да, то вынесите её из контента, а дальше опять z-index.
Вася (1 комментарий)
Спасибо будем пробовать)
Рыбак (1 комментарий)
Я малоопытный верстальщик и не продумал макет на сайте prodpak.ru/ooo/ сразу, по этому теперь мне сложно разобраться, как сделать нормальный футер, что мешает ему закрепиться. Подскажите, что мне делать, может быть весь код-CSS переписать или ещё можно как-то аккуратно его вставить, чтобы он был по всей ширине и опускался вниз или вверх в зависимости от основного содержимого?
Княгиня (660 комментариев)
Лучше переверстать с самого начала и начисто. Логику вашей текущей размётки быстро не поймёшь, а профессиональная переделка — это уже оплачиваемая работа. Попробуйте взять образец размётки из этого поста и прописать оформление для блоков left, right, content сообразно с вашим дизайном.
Михаил
Юлия! Дай Вам бог здоровья, счастья и процветания за такую статью!.. Ужас сколько времени убил на этот футер, пока на ваш сайт не набрёл. Но у меня есть вопрос. Может быть, он и глупый — но я только начал изучать вёрстку, так что не судите строго.
Итак. Во многих уроках по вёрстке макетов можно встретить такой момент: некий центральный блок с футером внутри выравнивают по центру путём задания ей
width: 1000px;
margin: 0 auto;
или же, если футер лежит вне обёртки,задают эти параметры им по отдельности:
#wrapper {
width: 1000px;
margin: 0 auto;
}
#footer {
width: 1000px;
margin: 0 auto;
}
Вопрос-то мой вот в чём заключается: я хочу (сделать макет по вашему уроку и) назначить эти значения тэгу body, чтобы он, вместо обёртки, выравнивался по центру и имел определённую ширину. С технической стороны всё получается, назначаю — работает, никаких проблем нет. Но мне важно знать — не ожидают ли меня сюрпризы в дальнейшем? Может быть, на каких-то устройствах сайт будет отображаться некорректно, или в будущем, после добавления на сайт блока с каким-нибудь свойством, всё пойдёт наперекосяк из-за того, что это свойство глючит, если тэгу body назначено
width: 1000px;
margin: 0 auto;
Ведь body и html — это не простые блоки, а как бы системные, что ли. Короче — width и margin у body можно менять, или этот тэг — святая святых и его значения всегда должны оставаться дефолтными?
Ещё раз дико извиняюсь за странный вопрос…
Княгиня (660 комментариев)
Можно менять у body. Можно с ним работать как с любым элементом, но при этом помнить, что некоторые правила css дают для него специфические последствия. Например, вертикальные отступы могут вытягивать окно больше, чем оно есть (горизонтальные можно применять без опаски).
Что касается этого рецепта центрирования, он к боди отлично применяется, и я сама им часто пользуюсь. Хороший, «чистый» способ, избавляющий от лишних обёрток.
Kirrr
Огромное спасибо за метод! Именно то, что было нужно.
Немного усовершенствовал для своих целей. Могу рассказать, как сделать футер не фиксированной высоты, а адаптированный по высоте к контенту.
1) Убираем в wrapper нижний паддинг (или делаем его по собственному усмотрению) — теперь wrapper не привязан к высоте футера
2) Убираем параметры высоты и overflow:hidden у footer
3) Дублируем (!) footer и вставляем дубль между wrapper и footer
4) Получаем конструкцию типа: wrapper — footer (дубль) — footer
5) Убираем у дубля footer параметры position: absolute и z-index
6) Добавляем дублю footer прозрачность opacity: 0
7) Все
Теперь мы имеем прозрачный блок между блоком контента и футером всегда равный высоте самого футера, причем футер может менять высоту в зависимости от контента.
Способ, конечно, не блещет изяществом, но работает.
Al (4 комментария)
Со свойством padding-bottom у блока, предшествующего подвалу, нужно быть осторожнее, поскольку цвет фона данного блока (если только он сам не является контейнером) может отличаться от цвета фона контейнера. Таким образом может появиться нижний отступ, который не вписывается в дизайн. Тут уже без добавления распорки (пустого блока с высотой, равной высоте подвала) не обойтись.
Княгиня (660 комментариев)
Ни разу у меня такой проблемы не было.
Контейнером чего? В моём примере он просто не может не быть контейнером, потому что содержит в себе основную часть страницы. А вот «распорка», которая пустой блок, та и есть не-контейнер.
Опять же, контейнера чего?