< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приемы верстки html-css » Как прижать footer (подвал сайта) к низу окна браузера

Как прижать footer (подвал сайта) к низу окна браузера

Как прижать footer (подал сайта) к низу окна браузера

Пост был обновлен: Сен 09, 2013

Приветствую всех посетителей моего блога! В данной заметке затронем тему верстки и разберем как прижать footer (подвал) сайта к низу окна браузера.

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

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

Вот как выглядит подвал по умолчанию, т.е. когда на странице мало контента:

Как прижать footer (подал сайта) к низу окна браузера

А вот как должно быть по сути:

Как прижать footer (подал сайта) к низу окна браузера

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

Для реализации задуманного создается общий блок «page» в который кладутся все остальные: шапка сайта (header), правая и левая колонки (left, right) и еще какие либо, а вот подвал (footer) остается за пределами данного блока «page».

[ad#728x90-middle]

Теперь перейдем к стилям. Задаем «html» и «body» высоту в 100%, а блоку «page» минимальную высоту также 100%. Таким образом у нас блок «footer» выталкивается за пределы окна браузера и его не будет видно совсем. Чтобы исправить ситуацию мы создаем еще один блок (substrate-footer) равный по высоте блоку подвала, но помещаем его в общий блок  «page», т.е. на то место, где по идее должен был находиться блок footer. Далее отрицательным отступом смещаем блок подвала (footer) вверх. Величина отступа равна высоте блока подвала и блока substrate-footer. После данных манипуляций наш подвал сайта встанет на свое место и будет постоянно находится внизу.

Читайте также:  Иконочные шрифты для сайта — что это и как использовать?

Также хотел отметить, что выше блока substrate-footer добавляется очищающий блок «clear». Это необходимо для того, чтобы отменить обтекание блокам «footer» и «substrate-footer», т.к. блокам «left» и «right» задаются свойства float:left и float:right соответственно.

Чтобы не быть голословным взгляните на код и вам станет сразу понятно что к чему.

HTML-код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Подвал по умолчанию</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="page"><!-- Основной блок PAGE -->
<div id="header"><h3>Шапка сайта</h3></div>
<div id="left"><h3>Левая колонка</h3></div>
<div id="right"><h3>Правая колонка</h3></div>
<div id="content">
<h3>Основная колонка с контентом</h3>
<p> Pellentesque vel est id massa varius interdum. Nunc nibh lectus,   fringilla quis scelerisque a, eleifend vitae nibh. Sed hendrerit mauris   quis tortor auctor ut luctus odio malesuada. Praesent facilisis felis   nisi, sed tincidunt erat. Phasellus ornare dignissim orci in   pellentesque. Aliquam dictum diam nec ipsum adipiscing vitae bibendum   tellus faucibus.</p>
<p>Praesent facilisis felis   nisi, sed tincidunt erat. Phasellus ornare dignissim orci in   pellentesque. Aliquam dictum diam nec ipsum adipiscing vitae bibendum   tellus faucibus. </p>
</div>
<div></div><!-- очищающий блок -->
<div id="substrate-footer"></div><!-- блок подложка подвала сайта -->
</div><!-- конец блока PAGE -->

<div id="footer"><!-- подвал сайта -->
<h3>Подвал сайта</h3>
</div>

</body>
</html>

CSS-КОД:

html,body {
    margin:0;
    padding:0;
    text-align:center;
    height:100%
}
#page {
    text-align:left;
    margin:0 auto;
    min-height:100%;
    width:960px;
}
#page h3 {text-align:center; margin:0}
#header {
    background-color:#06F;
    height:150px;
    margin:0 0 3px
}
#left {
    background-color:#C93;
    float:left;
    height:100px;
    width:180px;
}
#right {
    background-color:#C93;
    float:right;
    height:100px;
    width:180px;
}
#content {
    margin:0 180px;
    padding:10px
}
.clear {
    clear:both;
    height:0px;
}
#substrate-footer {
    height:100px;
    margin:20px 0 0
}
#footer {
    background-color:#6C9;
    height:100px;
    margin:-100px auto 0;
    width:960px;
}

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

Читайте также:  Фикс родительского блока, имеющего вложенные элементы с правилами "float"

А на этом все. Встретимся в следующих постах. Пока…

Пост был обновлен: Сен 09, 2013

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов
голосов: 5, средний бал: 1,20 / 5
Загрузка...

Проверка орфографии

Система Orphus

27 комментариев к статье "Как прижать footer (подвал сайта) к низу окна браузера"

  • Srg Дек 04, 2015 в 12:13

    Спасибо, комемнтарий добавлять не надо…

  • Александр Ноя 19, 2014 в 15:11

    Подскажите, а как сделать что бы контент и колонки тянулись до футера, даже когда контента мало ?

    • Заур Магомедов
      Заур Магомедов Ноя 19, 2014 в 15:37

      Имеете ввиду, чтобы блоки контента и сайдбара тянулись?

  • бомж Мар 19, 2014 в 1:23

    Зачем столько лишних элементов? Зачем всякие отрицательные отступы и прочая ересь? Если есть цель сделать подвал фиксированной высоты, то вот самое простое решение http://mystrd.at/modern-clean-css-sticky-footer/
    Если добавить
    height: 100%; height: auto !important;
    перед min-height, будет даже в старых ИЕ работать.

    P.S. Вроде сайты пишешь и раскручиваешь, а я, как обычный посетитель, не смог найти способа форматирования комментария (вставить код, например). Это, как минимум, странно…

    • Заур Магомедов
      Заур Магомедов Мар 19, 2014 в 11:47

      Данный метод не подходит, не буду писать зачем, что и т.д. Просто скажу — не подходит и все. Знаете сколько я перепробовал и остановился именно на том, что выложен выше.
      P.S. Кто вам сказал, что я сайту пишу? Я готовые cms использую, я вообще верстальщик, а не программист. Не знаю что вам там странным показалось…

      • бомж Мар 19, 2014 в 19:15

        Просто вы жаловались, что никто не показывает другие методы. Я показал. Жаль, что вы не хотите рассказать про его минусы. Хотелось бы конструктивной критики.
        Вы же писали про html5, про семантику, однако ваш метод эту семантику нарушает. Остальные минусы я уже называл.

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

        • Заур Магомедов
          Заур Магомедов Мар 19, 2014 в 22:26

          Приятно конечно, что вы читаете блог, но я ни на что не жаловался, просто кое кто умничал много. Вообще, содержание вышеприведенной статьи я никому не навязываю.
          Эти два метода идентичны по сути, ничего страшного в отрицательном отступе нет. Просто дополнительный блок — #substrate-footer выручает в некоторых случаях.
          Не понимаю какую семантику нарушает данный метод — то, что теги обычные div? Мы же здесь не html5 изучаем. Да и вообще статья опубликована почти год назад.
          В комментах wordpress гостям добавлять код запрещено по умолчанию. Здесь надо искать дополнительные методы.
          Вы, прежде чем камнями кидаться, спросите сначала сколько сайтов я обслуживаю и если у меня дополнительные заботы помимо этого блога.
          То, что нет кнопки «Цитировать» мне и самому не радостно, просто некоторые вещи в wordpress меня просто бесят, в том числе и комментарии. Я больше привык с joomla работать.

  • Александр Ноя 20, 2013 в 22:08

    Все работает, но появляется скролл, если мало контента на странице. Как быть?)

  • Роберт Ноя 15, 2013 в 9:56

    Спасибо Заур, ты мне помог.

    • Заур Магомедов
      Заур Магомедов Ноя 19, 2013 в 18:00

      Не за что 🙂

  • Макс Ноя 06, 2013 в 14:46

    Здравствуйте! Дайте пожалуйста совет начинающему! Шаблон Jsn_boot_pro, не могу прижать footer к низу. Все советы в интернете рассматривают примеры каких то простых шаблонов, я не смог применить эти рекомендации (в том числе и ваши) на своем.

    • Заур Магомедов
      Заур Магомедов Ноя 06, 2013 в 16:33

      Здравствуйте! Во-первых, как я могу дать вам совет, не зная что вы там делаете и что это за шаблон? Во-вторых, в таких крутых буржуйских шаблонах трудно бывает разобраться не только новичку, но и опытному верстальщику.

    • Andrew Ноя 21, 2013 в 18:46

      Да все подобные блоги пишут сами новички, «которые едва с гнезда вылезли»(есть несколько исключенийоколо 5 русских блогеров ), при этом активно копипастя друг у друга, этот «зауровский» метод на каждом подобном блоге, они разбирают самые тривиальные вещи, которые разве что для домохозяйки или бабули с деревни будут казаться сложными и ничем вам толком не помогут, это всё показуха для нубов, профессионалы такой фигней не страдают, так как А) нет времени на это Б) не имеет смысла засорять рунет, такой байды полным полно и повторюсь тривиальной байды

      • Заур Магомедов
        Заур Магомедов Ноя 21, 2013 в 18:56

        Я уже писал ниже в комменте, напишу и снова: чем бросаться умными словами, типа — тривиальная байда, нубы, бабули с деревни, зауровский метод и т.д. ПРЕДЛОЖИ ЛИ БЫ СВОЙ МЕТОД, который может сделать тоже самое, только во много раз легче и круче. Честное слово — я бы от «своего» метода отказался!

        • Andrew Дек 19, 2013 в 14:14

          прежде чем утверждать что метод ВАШ, докажите это, то что вы ID и классы поменяли, это еще не означает что он стал ВАШ, найти истоки уже скорее всего не возможно, это уже давно НИ ЧЕЙ НЕ МЕТОД, это решение по УМОЛЧАНИЮ, завтра вы «напишите свой метод» как позиционировать блок всегда по центру страницы и будете говорить что ЭТО ВАШ метод, хотя первые 10 страниц гугла говорят, что этот метод как минимум 20 блогеров

          • Заур Магомедов
            Заур Магомедов Дек 19, 2013 в 16:25

            Кто сказал, что это мой метод?

          • Мила Дек 20, 2013 в 9:55

            Andrew, хватит троллить, завидуй молча 🙂

          • Заур Магомедов
            Заур Магомедов Дек 20, 2013 в 10:46

            В своем комменте выше слово СВОЕГО взял в кавычки. Вообще под словосочетанием СВОЕГО МЕТОДА имелось ввиду метод, который я всегда использую, а не то, что именно я это придумал. Хотя, что я вам это объясняю… Адекватный человек, я уверен, именно так и понял.

  • Мила Окт 26, 2013 в 8:05

    Сейчас еще внимательнее посмотрела, у вас вообще много где не хватает точки с запятой

    • Заур Магомедов
      Заур Магомедов Окт 26, 2013 в 10:32

      ответил в предыдущем комменте почему не хватает

  • Мила Окт 26, 2013 в 8:00

    в файле css для #substrate-footer
    margin:20px 0 0 зачем?
    плюс не закрыли точкой с запятой

    • Заур Магомедов
      Заур Магомедов Окт 26, 2013 в 10:30

      margin:20px 0 0 зачем?

      Затем, чтобы основной контент не был прижат к футеру.

      плюс не закрыли точкой с запятой

      у последних свойств не обязательно ставить точку с запятой, точка запятая просто отделяет одно свойство от другого.

  • Alex Окт 24, 2013 в 15:04

    У вас примитивное решение подходящее только для сайтов типа Hello world.
    Footer нормального сайта в ряду случаев будет неизвестной заранее высоты.
    И что вы тогда будете минусовать? Или ещё врубать Javascript чтобы он посчитал высоту футера и потом на столько же делать минус у margin?
    Глупо и не профессионально!

    • Заур Магомедов
      Заур Магомедов Окт 24, 2013 в 15:30

      Чем умничать лучше бы сначала свой профессиональный вариант предложили бы. А мы на него посмотрим…

  • Георгий мая 08, 2013 в 14:35

    «самый крутой шаблон у которого подвал не остается прижат к низу мне кажется не серьезным»
    Ну тут уж на вкус и цвет товарищей нет. Я намеренно оставляю так как есть, хотя реализация простейшая.

    • Заур Магомедов
      Заур Магомедов мая 08, 2013 в 17:35

      Я следую по логике вещей, а по логике подвал должен быть всегда внизу ИМХО 🙂

  • Шамиль Апр 27, 2013 в 14:14

    Полезно для верстальщиков, спасибо 🙂

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]