Как прижать футер к низу страницы, к низу экрана?

Вы сейчас здесь: Главная > Videos > Как прижать футер к низу страницы, к низу экрана?

После просмотра видеоурока, вы узнаете ответы на вопросы:

  • Как прижать футер к низу страницы (экрана) с помощью позиционирования?
  • В каких случаях необходимо прижимать футер к низу страницы?
  • Что следует иметь ввиду, прежде чем решать проблему с футером?

Скачать материалы:
Скачать 13 видеоурок по CSS Размер: 4.55 MB, скачали: 535 раз.
Скачать исходники к 13 видеоуроку по CSS Размер: 167.43 kB, скачали: 565 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Я приветствую вас в тринадцатом уроке видеокурса по CSS. Мне думается, что вы вдоволь насладились возможностями позиционирования. И как я уже обещал, в этом уроке мы разберем одну часто возникающую проблему.

Проблема с футером

Давайте посмотрим на наш сайт. Он не испытывает никаких проблем с отображением. Но давайте оставим нашему сайту только один абзац. Перейдем в код и удалим три абзаца:

 <div id ="content">
 <div id="container">
 <img src="img/trash-full.png" alt="" id="trash">
 <h3>Что такое Lorem Ipsum?</h3><img src="img/man_grey.png">
 <p>Lorem Ipsum – это текст — "рыба", часто используемый в печати.</p> <br class = "clear">
 </div>
 </div>

Сохраним и посмотрим в браузере. Мы видим, что отображение сайта стало не столь впечатлительным: наш футер находится посередине страницы. Было бы намного интереснее, если бы он оставался внизу. Как это сделать, мы разберем в этом видеоуроке.

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

Как прижать футер к низу страницы?

Давайте перейдем в код таблицы стилей и пошагово решим возникшую проблему с футером. Первое, что нам нужно сделать — задать тегам <html> и <body> высоту, равную 100%.

 html, body {
 height: 100%;
 }

Далее мы задаем обертке wrapper минимальную высоту, равную 100%.

 #wrapper{
 width: 80%;
 min-width: 600px;
 max-width: 1200px;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 margin: 0 auto;
 background-color: #fff;
 text-align: left;
 min-height: 100%;
 }

Следующие две строчки важны для отображения в браузере IE6. Дело в том, что он понимает свойство height как минимальную высоту. А так как мы указываем это свойство, то нужно также прописать строчку, которая находится выше. Про «important» я вам расскажу в следующих видеоуроках. Таким образом, если вам не нужна поддержка IE6, то вы можете не писать две последние строчки.

 #wrapper{
 width: 80%;
 min-width: 600px;
 max-width: 1200px;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 margin: 0 auto;
 background-color: #fff;
 text-align: left;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 }

Далее добавим относительное позиционирование. Мы это делаем, чтобы потом задать футеру абсолютное позиционирование и указать ему свойство bottom со значением ноль.

 #wrapper{
 width: 80%;
 min-width: 600px;
 max-width: 1200px;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 margin: 0 auto;
 background-color: #fff;
 text-align: left;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 position: relative;
 }
#footer {
 background: #D2E6FF url('img/bg_footer.png') repeat-x;
 width: 100%;
 height: 40px;
 position: absolute;
 bottom: 0;
 }

Итак, мы прижали футер к нижнему краю экрана относительно блока wrapper, который имеет высоту 100%.

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

 #content{
 background-color: #fff;
 margin-right: 0 20% 0 120px;
 padding-bottom: 40px;
 }

#left_menu{
 background-color:#CCC url('img/bg_l_menu.png') repeat;
 float: left;
 width: 120px;
 overflow: hidden;
 padding-bottom: 40px;
 }
#right_menu{
 background-color:#CCC url('img/bg_r_menu.png') repeat;
 float: right;
 width: 20%;
 overflow: hidden;
 padding-bottom: 40px;
 }

Сохраним документ и проверим его в браузере. Поздравляю, мы решили проблему и прижали футер к низу страницы (низу экрана)!
Сейчас мы не будем заниматься решением всех проблем с позиционированием для IE6, однако альтернативу решения этих проблем вы увидите в следующем уроке. До встречи в четырнадцатом видеоуроке по CSS, в котором вы узнаете, как установить заглушку для IE 6.

Похожее видео

Подпишись на info-line:

Получать новые уроки на e-mail:

6 комментариев на “Как прижать футер к низу страницы, к низу экрана?”

  1. Jelena 14 ноября 2012 в 2:29 #

    Хотелось бы выразить огромную благодарность автору.

    Все просто, доступно и понятно.

    Как жаль, что не нашла урока как сделать, чтобы и футер был прижат и колонки были бы заполнены цветом меню, а не wrapper.

    Вверху об этом упомянуто,но самого урока такого нет.

    Сделайте, пожалуйста, такой урок тоже.

    Всю голову себе уже сломала и google замучала:)

    Ответить
    • Олег Зубцов 14 ноября 2012 в 11:28 #

      Спасибо и Вам за обратную связь 🙂

      Если подробнее рассматривать проблему, то начинать надо с того, что высота у нас изначально не задана, а значит — определяется содержанием этих блоков.

      Решить данную проблему можно несколькими способами.

      Решение №1: задать минимальную высоту «контенту» или одному из блоков меню.

      Вот как выглядит свойство минимальной высоты в CSS: 

      min-height: 740px;

      Ведь как мы помним из 11 урока, наши колонки принимают одинаковую высоту.

      Это решение — на скорую руку. Стоит осознавать, что в разных браузерах, высота колонок может отображаться по-разному.

      Решение №2: сделать колонки табличной версткой.

      Решение №3: создаем видимость колонок.

      Просто делаете изображение (1×800 px, например) в фотошопе, которое вмещает в себя продолжение ваших блоков. Потом задаете это изображение в качестве фона блоку #wrapper. Надеюсь, понятно, что я имею ввиду 🙂

      Данное решение работает только для фиксированной ширины.

      Решение №4: «обрезаем лишнее». Добавляем внутренние и внешние отступы всем нашим блокам (колонкам): 

      padding-bottom: 9999px;
margin-bottom: -9999px;

      Прошу заметить, что внутренний отступ — положительный, внешний — отрицательный.

      Далее добавляем в блок #wrapper свойство: 

      overflow: hidden;

      То есть, мы обрезаем все лишнее, что выходит за блок #wrapper.

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

      Советую использовать данное решение, так как полагаю, что оно для Вас подходит лучше всего.

      Также проблему можно решить и с помощью JavaScript, но это уже совсем другая история 🙂

      Ответить
      • Jelena 14 ноября 2012 в 12:15 #

        Применила 4 решение. Получилось! Я вас обожаю.:)

        Ответить
  2. Mans 12 февраля 2013 в 0:32 #

    Здравствуй,Олег! Прослушал все твои уроки, спасибо большое! Научился многому. Вот хочу спросить, как делать на сайте поиск, и регистрацию на сайте? Что нужно учить? Можно ли просто зная CSS и HTML все это сделать?

    Ответить
    • Олег Зубцов 15 февраля 2013 в 5:10 #

      Привет! Как сделать поиск от Яндекса на своем сайте читай тут. Для самостоятельного написания формы поиска и создания регистрации на сайте, нужно знать PHP и MySQL. В противном случае — лучше воспользуйтесь скриптами. Мы уже постепенно приближаемся к PHP... Не забудь подписаться на RSS, чтобы не пропустить новые уроки 😉

      Ответить
  3. Любовь Константиновна 17 апреля 2013 в 20:32 #

    Олег, преогромнейшее спасибо!!! Но, пожалуйста, поделитесь вашей красивой

    кнопочкой. — "вверх. Она лучшая, что встречалось. Если не жаль. Спасибо за Ваши великолепные уроки. Успехов Вам в делах и в жизни.

    Ответить

Оставить ответ