Как сделать футер сайта css
Перейти к содержимому

Как сделать футер сайта css

  • автор:

Как прижать footer к низу окна браузера с помощью CSS.

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.

В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).

Бывают страницы, в которых содержимое занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:

04-01-2014 9-04-25

Нижняя часть сайта (footer) прижимается к контенту и внизу страницы остается пустое пространство.

Как избежать этой ситуации? Как прижать footer к низу окна браузера?

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

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Итак, имеем следующий HTML-код:

  Заголовок страницы  
Содержимое header

Заголовок.

Пример текста документа

Место copyright.

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

* < margin:0; >body height: 100%; min-width:900px; > html < position:relative; min-height:100%; >#container < padding-bottom: 100px;/*Примерно 2 размера footer, чтобы он не наезжал на контент при узком окне браузера*/ >#footer

В общем, теперь страница выглядит вот так:

04-01-2014 9-42-33

Эффект достигается за счет задания элементу html минимальной высоты min-height 100% и относительного позиционирования position:relative.

Для элемента body обязательно нужно задать высоту 100%.

Теперь, когда блок footer будет абсолютно позионироваться относительно низа страницы

position: absolute; bottom: 0;

он встанет как раз в то место, где заканчивается 100% высоты элемента body.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Что такое футер и что там разместить

Во время создания дизайна сайта или его SEO-оптимизации важно сделать так, чтобы им было удобно пользоваться. Хорошее юзабилити складывается, когда все элементы на странице продуманы: начиная шапкой и заканчивая подвалом. Зачастую оптимизацией последнего пренебрегают.

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

  1. Что такое футер сайта
  2. Аналитика
  3. Что разместить в футере сайта
    1. 3 обязательных элемента
    2. Адрес
    3. Карта
    4. Обратная связь
    5. CTA (Call to action)
    6. Перелинковка
    7. Социальные кнопки
    8. Преимущества
      1. Примеры статических
      2. Примеры динамических (виджетов)

      Что такое футер сайта

      Футер или подвал сайта (англ. footer) — это блок в самом низу страницы с информацией, которая может быть полезна посетителю.

      Аналитика

      Из исследования, проведенного на основе 1.000.000 посетителей, было подсчитано, что большая часть времени проводится за линий сгиба экрана.

      Убедиться можно самим, посмотрев отчет «карта скроллинга» в Яндекс.Метрике. Кроме того некоторую информацию (телефон для обратной связи, электронную почту и т.п.) могут искать намеренно в футере страницы, если не нашли ее в шапке. Поэтому важно убедиться, что вы предоставили посетителю достаточно информации перед тем, как он покинет сайт. Во время тестирования сайта в компании UserTesting заметили, что размещение призыва к действию (CTA) в подвале помогло повысить конверсию на 50% за двухнедельный период! Компания SmartInsights также сообщила, что они увидели почти 24% рост конверсии продаж, после оптимизации нижнего колонтитула своего сайта. Доработка подвала заключалась в грамотной перелинковке. Как ее сделать разберемся далее в одноименной главе.

      Что разместить в футере сайта

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

      3 обязательных элемента

      1. Политика конфиденциальности. Ссылка на документ или страницу, где объясняется, как вы будете использовать и защищать личные данные посетителей.
      2. Условия использования. Ссылка на страницу, где расписаны общие правила и рекомендации, регулирующие использование сайта.
      3. Авторское право ©. Эта информация дает понять, что копирование информации с вашего сайта будет считаться плагиатом.

      3 обязательных элемента на примере www.healthline.com

      3 обязательных элемента на примере www.healthline.com

      Адрес

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

      Карта

      В дополнении к адресу в подвале может размещаться карта. Это позволит задержать посетителя на сайте и не перенаправлять его на сторонние ресурсы. Однако следите, чтобы из-за карт не пострадала скорость загрузки сайта.

      Карта сайта на примере 24stoma.ru

      Карта сайта на примере 24stoma.ru

      Обратная связь

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

      Кроме того можно использовать и другие средства связи: Viber, WhatsApp, электронную почту.

      Способы обратной связи в подвале на примере 63plitka.ru

      Способы обратной связи в подвале на примере 63plitka.ru

      CTA (Call to action)

      В подвале должны быть кнопки или лид-формы, побуждающие совершить действие.

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

      Призыв «Добавить заведение» в подвале на примере banketof.ru

      Призыв «Добавить заведение» в подвале на примере banketof.ru

      Призыв «Записаться на консультацию» в подвале на примере oftalnova.ru

      Призыв «Записаться на консультацию» в подвале на примере oftalnova.ru

      Несколько CTA в подвале на примере zub.ru

      Несколько CTA в подвале на примере zub.ru

      Несколько CTA в футере на примере www.orbitmedia.com

      Несколько CTA в футере на примере www.orbitmedia.com

      Призыв «Подписаться на рассылку» в подвале на примере searchengineland.com

      Призыв «Подписаться на рассылку» в подвале на примере searchengineland.com

      Личный кабинет на примере ambotis.ru

      Личный кабинет на примере ambotis.ru

      Перелинковка

      Включайте только самые важные страницы или разделы в качестве ссылок в подвале. Это могут быть основные/популярные разделы (меню) в вашем интернет-магазине, страницы с акциями и другие ссылки, которые могут заинтересовать посетителей. Для простоты восприятия разделяйте ссылки на столбцы.

      Прижимаем футер к низу страницы

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

      Простейшая html разметка:

      Footer прижимается к низу путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и wrapper ) на 100%. При этом блоку content нужно указать нижний отступ, который равен или больше высоты футера, иначе последний закроет часть контента.

      * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.content < padding-bottom: 90px; >.footer

      Способ #2

      Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

      * < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer

      Способ #3

      Данный способ хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. Здесь мы эмулируем поведение таблицы, превратив блок wrapper в таблицу, а блок content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

      * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content

      Способ #4

      Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту футера. 100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

      * < margin: 0; padding: 0; >.content

      Способ #5

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

      * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: flex; flex-direction: column; height: 100%; >.content < flex: 1 0 auto; >.footer

      Способ #6

      Здесь целая библиотека на разные случаи (используется Flexbox )

      Верстка подвала сайта HTML+CSS.

      Актуальность HTML верстки очень высока. На всех фриланс-биржах всегда висит по 10-20 заказов на срочную верстку, также HTML+CSS+JS позволяют клепать пусть плохие, но приложения под Android и iOS. Да и любой компании нужен работающий сайт, а не только красивые дизайны. Что такое обычный проект для верстальщика? Это 5-10 страниц в psd/pdf, которые нужно очень качественно сверстать за 2-3 дня со всеми правками и спонтанными идеями клиента.

      Давайте сверстаем подвал для сайта и поймем, удастся ли получить удовольствие и деньги от процесса верстки своих же макетов.

      Предварительно, установите в свой редактор Emmet. Пройдите flexboxfroggy.

      Самое важное — заранее продумать структуру сайта, расставить div’ы в необходимой последовательности и с правильной вложенностью. Если вы верстаете страницу сразу, без дизайна (например, клепаете 5-10 лэндингов за рабочий день), то лучше набросать структуру хотя бы на листочке, иначе вы будете переверстывать страницы сайта по несколько раз.

      Верстаем. Элементы бывают блочные (структурное форматирование), текстовые (строчные). Под элементом подразумевается конструкция вида

      some text

      — параграф. Сделать из блочного элемента строчный можно с помощью display: inline . Строчные элементы используются для оформления текста. Блочный элемент это прямоугольник с контентом. К блочным относятся контейнеры ,

      ,

      и др. Один блочный элемент можно вложить внутрь другого, и это помогает реализовать большинство затей концептуальных дизайнера. Не надо вкладывать блочный элемент в строчный, это не соответствует стандартам.

      Старайтесь всегда все центровать. Это сильно упрощает работу с адаптивом.

      Думаю, что наиболее важно рассмотреть display . Display это свойство, которое определяет, как элемент будет показан на странице. Самые распространенные и надежные значения это block, inline, list-item и none . Block делает элемент блочным, inline делает элемент строчным, inline-block делает элемент внутри блочным, но при этом он обтекается другими элементами страницы подобно строчному, list-item делает элемент блочным и добавляет маркеры списка, none прячет элемент (а hidden со свойством visibility позволит элемент скрыть, но оставить место пустым). Также, none убирает элемент из разметки, что не всегда допустимо.

      Если на странице есть заголовки H1 и H3 , но дизайнер не добавил H2 , то разработчик не может себе позволить пропустить H2 . Иерархия заголовков важна для поисковых систем и скрин-ридеров. Такой заголовок верстается, и вырывается из потока с помощью position: absolute , уменьшается и прячется за пределы экрана. Без таких грязных приемов не удастся пройти американское тестирование на доступность интерфейса с помощью ARC Platform. Благо, он весьма простой.

      Пути к файлам прописываем следующим образом: src=»https://your-scorpion.ru/make-footer-site/img/image.png» . Можно писать и src=»https://your-scorpion.ru/img/image.png» , но могут возникнуть проблемы при заливке файлов на хостинг. Путь к картинке прописывается так, background-image: url(«../img/background.png»); , здесь мы видим выход на уровень вверх за счет ../ .

      Вооружившись этим знанием, накидываем вложенность div’ов и общую структуру, не забывая все грамотно оформлять отступами. Ах да, и никаких таблиц, только блоки. В этом и заключена основная суть HTML-верстки: правильная расстановка div’ов и грамотное оформление через классы CSS. Конечно, верстальщик должен прикрутить js-скрипты. Но эта работа выходит за рамки данного урока, да и бОльшая часть скриптов требует всего-то прописать класс. Структуру набрасывать легко:

      Пишем примерно такой HTML-код:

       
      О НАС
      Мы инновационный стартап, специализирующийся на разработке приложений под все устройства! У нас работают специалисты по системной интеграции, разработке приложений.
      РАЗДЕЛЫ САЙТА
      Услуги Товары Прессе
      Наши награды Карта проезда Контакты
      ВИДЫ УСТРОЙСТВ
      Set-top box Smart-TV iOS 7 taplet
      Android WinPhone Web site
      MobileMachine
      Работаем с 2009 года

      Набросав структуру, можно вставить картинки и текст, и любой другой контент. Не забываем установить плагин LiveServer, чтобы не обновлять страничку вручную + настраиваем автосохранение. Смотрим в самых популярных браузерах на получившееся безобразие. Пока что клиенту рано показывать наш результат работы, иначе придётся оправдываться за качество работы. И начинаем писать классы CSS.

      CSS 3 позволяет очень изящно и дёшево сделать страницу красивой и соответствующей дизайну. Плавные смены оттенков текста, сложные градиенты, отступы от краев, тени/свечение, отрицательные значения, прозрачность и многое другое позволяет сделать огромное количество распространенных элементов дизайна с помощью кода. Пара важных моментов. Firefox плохо отрабатывает transparent, используйте RGBa. IE8 прекрасно отрабатывает transparent, но не знает что такое RRGa.

      Важно сразу усвоить принцип использования позиционирования: абсолютное используется для наложения одного элемента на другой (картинка в галерее, стрелки для листания контента и т.п.) и для декоративных элементов. Относительное используется редко, помогает внедрить абсолютный элемент в другой элемент (принцип ребенок/родитель) с привязкой координат.

      Float: блочные элементы обычно начинаются с новой строки, и хорошим способом изменить тип обтекания является float. Блочные элементы располагаются друг под другом. Например, float: left; выровняет картинку по левому краю, и текст будет её обтекать. Также элементы встанут в один ряд с переносом строки.

      И несколько маленьких советов: лучше использовать P, чем BR. Лучше использовать text-transform:uppercase/lowercase, чем писать капсом. Не используйте inline styling, лучше сделайте все через один style.css. Или множество scss. Используйте normalize.css, хотя его актуальность уже под сомнением. Ранее normalize.css был популярен, но сейчас используется больше по привычке. Сейчас браузеры достаточно близки друг к другу по дефолтным значениям. Элементы, которые встречаются в документы только один раз внутри документа, делайте через идентификаторы, в противном случае используйте классы. Вот CSS код:

      .my__link_big,.my__link { color:#525252; font-size:14.4px; } .footer_main { margin-top:10px; background-color:#7e7e7e; background:url("bg.jpg"); font-family: 'Scada', sans-serif; } .footer { width:1000px; margin:0 auto; } .clear_footer,.b-footer__social,.bem_sitemap { margin-top:12px; margin-left:18px; padding-left:26px; float:left; } .logo_align { float:right; } .size_block { width: 150px; } .description { width:295px; } .tet_header,.footer-title,.b-networks__header { text-shadow: 0 1px 3px rgba(0,0,0,0.3); color: #C5C5C5; border-color: rgba(0,91,173,.3); font-size:17px; width:100%; letter-spacing: 1px; } .btext { margin-top:3px; font-size:14.6px; color:#f5f5f5; list-style-type: none; } .clear_footer { height:23px; } .b-sitemap__links { float:left; } .glow_undecorate { color: #ffffff; text-shadow: 2px 2px 10px #5ab3f7, -4px 2px 14px #2784d3; } .b-link_block { margin-top:12px; display:block; } .b-sitemap__links_right { float:right; margin-right:-10px; letter-spacing: 1px; } .b-footer-logo__copyright { clear:right; text-shadow: 0 0 20px #ff6632, 0 0 30px #ff6632; color: #ffb762 !important; padding-top:8px; } .b-footer-logo__copyright { font-size:21px; color:#f5f5f5; text-align:right; }

      В итоге мы получаем фиксированную верстку, которая не разъезжается и смотрится симпатично. Конечно, демонстрация некоторых возможностей CSS не прошла бесследно. Такое количество эффектов не годится для высоконагруженных сервисов, но для большинства задач пойдёт.

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

      Обратите внимание, что так мы обращаемся по тегу только к body , так как он на странице всегда один. Ко всему остальному — через классы.

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

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