Как прижать футер к низу страницы (руководство к действию) (страница комментариев 4)

26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »

Отзывы (66) на «Как прижать футер к низу страницы (руководство к действию)»
  1. Chenja (1 комментарий)

    Здравствуйте, Юлия. Использовала ваш метод весьма успешно, пока не столкнулась с одной проблемой. При изменении ширины окна футер также меняет свою ширину, а вот обертка контента остается прежней и появляется нижняя полоса прокрутки. В итоге футер оказывается равен ширине окна,но меньше ширины страниц. Как можно сделать так, чтобы ширина body и, соответственно, футера принимала ширину страницы, определяемой контентом,а не ширину окна?

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Заочно не ясно, как это у вас выглядит. Проблема с шириной может возникать, если ширина сайта больше ширины окна; у правильно свёрстанного сайта такого быть не должно. (Хотя бывают такие админ или контент-менеджеры, которые способны неправильным наполнением изуродовать самый дуракоустойчивый шаблон.)

      Ответить на этот комментарий
  2. Евгения (1 комментарий)

    Все получилось, но стрелка «Наверх» исчезает под футером((

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Стрелка не в контентной области? Если нет, просто сделайте ей z-index побольше. А если да, то вынесите её из контента, а дальше опять z-index.

      Ответить на этот комментарий
  3. Вася (1 комментарий)

    Спасибо будем пробовать) ;)

    Ответить на этот комментарий
  4. Рыбак (1 комментарий)

    Я малоопытный верстальщик и не продумал макет на сайте prodpak.ru/ooo/ сразу, по этому теперь мне сложно разобраться, как сделать нормальный футер, что мешает ему закрепиться. Подскажите, что мне делать, может быть весь код-CSS переписать или ещё можно как-то аккуратно его вставить, чтобы он был по всей ширине и опускался вниз или вверх в зависимости от основного содержимого? *CRAZY*

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Лучше переверстать с самого начала и начисто. Логику вашей текущей размётки быстро не поймёшь, а профессиональная переделка — это уже оплачиваемая работа. Попробуйте взять образец размётки из этого поста и прописать оформление для блоков left, right, content сообразно с вашим дизайном.

      Ответить на этот комментарий
  5. Михаил

    Юлия! Дай Вам бог здоровья, счастья и процветания за такую статью!.. Ужас сколько времени убил на этот футер, пока на ваш сайт не набрёл. Но у меня есть вопрос. Может быть, он и глупый — но я только начал изучать вёрстку, так что не судите строго.

    Итак. Во многих уроках по вёрстке макетов можно встретить такой момент: некий центральный блок с футером внутри выравнивают по центру путём задания ей

    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 можно менять, или этот тэг — святая святых и его значения всегда должны оставаться дефолтными?
    Ещё раз дико извиняюсь за странный вопрос…

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Можно менять у body. Можно с ним работать как с любым элементом, но при этом помнить, что некоторые правила css дают для него специфические последствия. Например, вертикальные отступы могут вытягивать окно больше, чем оно есть (горизонтальные можно применять без опаски).

      Что касается этого рецепта центрирования, он к боди отлично применяется, и я сама им часто пользуюсь. Хороший, «чистый» способ, избавляющий от лишних обёрток.

      Ответить на этот комментарий
  6. 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) Все

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

    Способ, конечно, не блещет изяществом, но работает.

    Ответить на этот комментарий
  7. Al (4 комментария)

    Со свойством padding-bottom у блока, предшествующего подвалу, нужно быть осторожнее, поскольку цвет фона данного блока (если только он сам не является контейнером) может отличаться от цвета фона контейнера. Таким образом может появиться нижний отступ, который не вписывается в дизайн. Тут уже без добавления распорки (пустого блока с высотой, равной высоте подвала) не обойтись.

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Ни разу у меня такой проблемы не было.

      (если только он сам не является контейнером

      Контейнером чего? В моём примере он просто не может не быть контейнером, потому что содержит в себе основную часть страницы. А вот «распорка», которая пустой блок, та и есть не-контейнер.

      может отличаться от цвета фона контейнера

      Опять же, контейнера чего?

      Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.