При разработке шаблонов, в какой-то момент Вы, должно быть сталкивались с таким вопросом. Так давайте же разберемся, как сделать так, чтобы футер был внизу тела шаблона, даже если на странице мало текста, который бы толкал футер достаточно вниз, вместо этого футер находится в центре экрана, оставляя огромные пробелы ниже.
В этом уроке я собираюсь рассказать Вам о современных техниках верстки, в частности для создания прилипающего футера, которые гарантированно будут Вам полезны, и гарантированно будут придерживать его в нижней части страницы.
ТЕХНИКА
Я начну строить нашу страницу с помощью верстки адаптивных блоков. Кто еще до сих пор не знает, но начиная с 21 апреля 2015 года Гугл ввел новые методы ранжирования сайтов, в основе которого лежит адаптивный дизайн сайта. Если Ваш сайт не имеет адаптивного дизайна, Ваш ресурс будет понижаться в выдаче поисковой системы. Вот оно чудо мобильных устройств. Для тех, кто не совсем в курсе, что такое адаптивные блоки и с чем их едят, я оставлю пару ссылок в конце статьи.
Моя демонстрационная страница будет самая что ни на есть простая. Состоять он будет из трех основных частей:
- Заголовок(head);
- основной раздел (main section);
- футер(footer);
Вот вам пример html кода, ничего в нем сверхъестественного нет.
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
Первым делом добавим display: flex в body, и добавим направление направление для flex-элементов размещенных на нашей странице (по умолчанию flex-direction: row; расположение объектов слева направо для ltr, и справа налево для rtl). Кроме этого добавим height: 100%;, для того, чтобы заполнить весь экран.
html{ height: 100%; }
body{ display: flex; flex-direction: column; height: 100%; }
Теперь я задам параметры, которые будут определять, какое место будет занимать тот или иной блок на странице. Сделаю это с помощью свойства Flex. Ниже я привел ещё ряд свойств, с помощью которых можно будет задать:
- flex-grow – Определяет для flex-элемента возможность «вырастать» при необходимости
- flex-shrink – Определяет для flex-элемента возможность сжиматься при необходимости
- flex-basis — Определяет размер по умолчанию для элемента перед распределением пространства в контейнере
Я хочу, чтобы мой footer занимал столько место, сколько ему нужно, а все оставшееся место было бы доступно для основного содержимого. Ниже я привожу пример того, как выглядит мой CSS код:
header{
flex: 0 0 auto;
}
.main-content{
flex: 1 0 auto;
}
footer{
flex: 0 0 auto;
}
Для того чтобы увидеть этот метод в действии, перейдите на демо-страницу, нажав на изображение ниже. Для увеличения контента, кликните на большую розовую кнопку, и понаблюдайте, как адаптивный макет изменяется и толкает footer вниз.
Краткое руководство Flex — Здесь
5-ти минутные интерактивные уроки — Здесь
О методиках создания адаптивных блоков — Здесь
Заключение
В заключении хочу сказать, что адаптивность блоков являются мощным союзником при создании шаблонов сайта с нуля. Все основные браузеры поддерживают адаптивность.
Я надеюсь, что Вам понравился именно этот способ создания простых липких футеров и что Вы нашли в этой статье что-то новое и полезное для себя. Оставляйте свои комментарии, если у вас есть свой крутой трюк с адаптивными блоками, напишите мне.
Комментарии (50)
i360u
30.05.2016 17:07+1Принято говорить "адаптивность", ибо это более точный термин в данном контексте.
serg199627
30.05.2016 17:11+1Не грубая, но все же ошибка, спасибо, поправил ) А как я хотел? Учиться на своих ошибках, тоже не плохой опыт!
shoomyst
30.05.2016 17:11Раньше писали, что flexbox нежелателен для глобального layout страницы — пока лучше делать на флоатах и ждать grid, а flexbox использовать лишь в различных блоках страницы из-за производительности. С того времени что-то изменилось?
Noiwex
30.05.2016 17:16Все браузеры нормально поддерживают flexbox. Для глобального layout он очень удобен.
VitaLik_is_goodman
30.05.2016 18:00«в различных блоках страницы из-за производительности», вопрос про производительность, а не поддержку
Aingis
30.05.2016 19:00+1Как-то раз давно обнаружилось?, что в Вебките старая реализация флексбоксов (с префиксами и старыми именами свойств) была не оптимизирована по быстродействию. Но при реализации последней версии спецификации (тоже с префиксами) это поправили?. Три года прошло, можете не переживать по этому поводу ;-).
? https://www.smashingmagazine.com/2013/05/building-the-new-financial-times-web-app-a-case-study/
? https://developers.google.com/web/updates/2013/10/Flexbox-layout-isn-t-slow
Sulin
30.05.2016 17:23+2А как насчёт кроссбраузерности? что будет в IE 9 и выше, в адроиде 4.0 и выше. как же префиксы, как же танцы с бубном что бы угодить динозаврам.
Rad1calDreamer
30.05.2016 17:45+3Пока вы пляшете для того чтобы «угодить динозаврам» — ими будут пользоваться. Есть конечно часть людей, у которых просто нет выбора, но даже они (их руководство), когда увидят, что необходимый им сайт просто не работает в их «динозавре», задумаются о смене
Hooter
30.05.2016 17:51+2поддержка IE 9 Google прекращена еще в 2013 году, Microsoft официально прекратил поддержку IE 8-10 в январе. Так что какой смысл для новых проектов вспоминать про эти браузеры? В IE 11 данный код уже будет работать, что то большее надо проверять, там были баги с поддержкой Flex
Sulin
30.05.2016 17:59+2Какая разница когда прекратилась поддержка Microsoft. Если делать свой проект то нет смысла подстраиваться под динозавров, я с этим полностью согласен, но когда верстаешь на аутсорсе(фрилансе) я еще не встречал ни одного заказчика или студия которая бы отказалась от IE9 или всяких андроидов 4.0.1.
AndreyBerezhnoy
30.05.2016 20:37Еще ни разу не встречал чтобы клиент просил <IE10. Вообще про IE молчат :)
MGames
31.05.2016 12:31А вы на фрилансе цену на вёрстку под бабуль приподнимите и сразу окажется, что не так уж оно и необходимо.
Rad1calDreamer
30.05.2016 17:59-2В пору вспомнить анекдот про мышей и кактус
Sulin
30.05.2016 18:02+2именно так и есть, я бы как верстальщик давно бы откзаался от кучи старых методов в пользу совеременных но менее кроссбраузерных но кушать хочется всегда и приходится продолжать делать то что считают хорошим различные биг боссы.
pman
30.05.2016 18:23+5Пока пользователи старых динозавров приносят деньги — поддержка имеет смысл. Выбор целевой платформы должен быть обусловлен экономическими причинами, а не тем, что девелоперу хочется супермодные фишки попробовать и не заморачиваться с обратной совместимостью. Например если в месяц пользователи IE8 приносят, скажем, 500к рублей — имеет ли смысл переставать поддерживать этот браузер и терять столько прибыли, или проще нанять 2-3 верстальщиков чисто под этот браузер и все равно остаться в плюсе?
И да, не у всех есть возможность обновляться. Например есть корпоративные пользователи в компаниях где все зарегулировано политиками безопасности и нет возможности обновить браузеры так как какие-то критические штуки написаны с использованием ActiveX и java-апплетов. Внезапно, таких пользователей совсем не мало.ambientos
30.05.2016 19:55-4И в качестве оси, наверное, Windows XP?
Довольно странно слышать о том, что кто-то платит большие деньги, но для себя не может потратить лишнее, чтобы обновить софт.pman
30.05.2016 20:02+5Банковский сектор, финансовый сектор, консалтинг из того что знаю.
Тут дело не в том, что они не могут вложить денег, дело в том, что какие-то пользователи пользуются сайтами в обеденный перерыв на работе, в послерабочее время с рабочего компьютера. А почему внутри корпоративной сети и на корпоративных компьютерах стоят такие ограничения — отдельный вопрос. Так вот, зачастую эти пользователи одни из самых платежеспособных.
Компании в которой я работаю прибыль приносят даже пользователи IE7. И да, прибыли больше, чем стоимость поддержки старых браузеров. Другое дело, что все добро на старых браузерах работает в режиме gracefull degradation.
fliginskih
31.05.2016 08:43А как же корпоративный сегмент? Где системы для внутреннего пользования отрезаны совсем или частично от глобального интернета.
Rad1calDreamer
31.05.2016 09:04+1Я не специалист в сфере безопасности, но разве софт (ОС и браузер), в который не обновляется, который бросили сами разработчики даже — это не потенциальная угроза?
Hooter
31.05.2016 11:23Не знаю как у Вас, но у нас корпоративный сегмент (вузы в США и канаде), доля младших версии IE крайне мала, доли процентов, большинство было IE11 и немного IE9.
elser
30.05.2016 18:07-2Да, соглашусь с остальными комментариями — смысла равняться на IE9 нет, но на вопрос все же отвечу: в IE9 flex-direction: column не работает.
Extremum
30.05.2016 17:50+15Уже ни в какие рамки. Скоро будут статьи «как сделать обтекание картинки по левому краю». А по теме — во-первых, это писали давно в составе большого мануала. Потом про эту же тему для тех кто не читает документацию сегодня утром писали (!) Но утром хоть пять пересказов, а тут всего один, похожу что оттуда и взят только букв больше.
serg199627
30.05.2016 17:53-16Посмотри подробнее, я указал сайт с оригиналом статьи. Тут я расписал более подробно, так как у некоторых возникали вопросы
Extremum
30.05.2016 17:54+7А оригинал от 2014 года с Хабра нельзя было взять? И тыкать незнакомым людям — моветон.
rockin
30.05.2016 19:56-10расскажите про этот «моветон» англоязычным, вас просто не поймут
с первой частью возражения согласен, статья слишком мала и по сути, и по буквамExtremum
30.05.2016 19:58+5Мы на русскоязычном ресурсе, не находите? За пять лет здесь я как-то привык к нормам общения.
rockin
30.05.2016 22:36-13я в интернете, а где ВЫ — не знаю
я общаюсь и на английском, и на русском
you = ты
«тыканье» — всего лишь способ человека ближе к себе сделать
кому мы «тыкаем» в реальной жизни? тех, кого более всего уважаем, любим, ценим.
общение на «вы» — это есть официоз
за пять лет привыкли? за пять месяцев присутствия бывших рид-онли отвыкнете.
тоже мне, «белая кость»…Extremum
30.05.2016 22:55+4Не белая кость, даже в жизни такой всегда, могу себе позволить. Но вам судя по всему не понять, а вот про ридонли это верно, уже убедился в этом на вашем примере. И ближе меня делать не надо, прекрасно себя чувствую на расстоянии от таких как вы. Потому дальнейшее продолжение беседы считаю непродуктивным.
Fen1kz
30.05.2016 18:13+7Я надеюсь, что Вам понравился мой способ создания простых липких футеров.
Автор такой умный, красивый в белом пальто стоит. Ещё бы патент оформил. На (Сделайте через flexbox)
serg199627
30.05.2016 18:53Поправил
Я надеюсь, что Вам понравился именно этот способ создания простых липких футеров.
Строго не судите, все таки одна из первых статей, поднаберусь еще опыта )))
baldr
30.05.2016 19:10Для тех, кто не совсем в курсе, что такое адаптивные блоки и с чем их едят, я оставлю пару ссылок в конце статьи.
Ссылки забыли. грустьпичаль.jpg
boolive
31.05.2016 03:38+2Интересно мнение о прижатие через dispaly: table
kovalevsky
31.05.2016 09:06-1костыль
boolive
31.05.2016 11:55В чём на практике недостатки?
kovalevsky
31.05.2016 12:01Нет, их нет. Давайте дальше будем верстать всё таблицами, когда у нас есть Flexbox и CSS Grid, в скором будущем, будет
anttoshka
31.05.2016 07:21Относительно поддержки старыми браузерами есть библиотека flexibility github.com/10up/flexibility Работает не все, но основная часть поддерживается
Fragster
31.05.2016 16:15+1«Липкий» — это прилипающий к полу, если содержимого недостаточно? Все равно наиболее кроссбраузерное решение — таблица :) https://habrahabr.ru/post/151320/#comment_5129392
Free_ze
На заметку опытному верстальщику*
serg199627
спасибо, исправил )