Матвей Земсков

Заметки веб-мастера

Воскресенье, 12 июня 2016 12:02

Фиксируем «подвал» внизу страницы с помощью Flexbox

Оцените материал
(0 голосов)

В процессе верстки макетов, разработчик часто сталкивается со следующей проблемой: при недостаточном количестве контента, «подвал» отображается где-то по середине страницы.

Такая ситуация происходит, когда «подвал» сайта имеет статическое позиционирование и расположен в конце разметки страницы. Как мы видим на рисунке, нет ничего, что могло бы подтолкнуть «подвал» вниз и он располагается в центре экрана, а под ним остается много свободного места.

В этой небольшой заметке, мы ознакомимся с одним современным методом закрепления «подвала» внизу страницы, независимо от количества контента на ней.

Чтобы предотвратить ситуацию, описанную выше, мы создадим нашу страницу с применением Flexbox – продвинутого инструмента из CSS3, применяемого при создании адаптивных сайтов.

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

Наша демо-страница состоит из «шапки», содержимого и «подвала» - все как обычно, ничего особенного.

HTML

	<body>
	  <header>…</header>
		<section class="main-content">…</section>
	  <footer>…</footer>
	</body>

Чтобы активировать режим Flexbox, необходимо добавить к элементу body правило display: flex, а также изменить направление блоков (по-умолчанию они располагаются горизонтально). Элементы html и body должны иметь высоту, равную 100%, чтобы страница занимала весь экран целиком.

CSS

	html{ height: 100%; }
	body{ display: flex; flex-direction: column; height: 100%; }

Теперь нам нужно указать сколько места будет занимать каждый из перечисленных элементов. Для этого мы будем использовать универсальное CSS-свойство flex, которое объединяет в себе следующие flexbox-свойства:

  • flex-grow – Указывает, сколько места будет «забирать» элемент у своего родителя;
  • flex-shrink – Насколько элемент будет уменьшаться, в случае когда не будет хватать места для соседних элементов;
  • flex-basis – размер элемента по-умолчанию;

Нам необходимо, чтобы «шапка» и «подвал» занимали столько места, сколько им необходимо, а остальное пространство будет отведено под основное содержимое страницы. В этом нам поможет следующий CSS-код:

CSS

	header{
	/* Высота «шапки» должна быть статичной и занимать столько места сколько ей нужно*/
	/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
	flex: 0 0 auto; }
	.main-content{
	/* Установим значение flex-grow равным 1, чтобы основное содержимое занимало все оставшееся место на странице. У остальных элементов flex-grow: 0, потому что их высота статична. */
	/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
	flex: 1 0 auto; }
	footer{
	/* «Подвал» также как и «шапка» имеет статичную высоту, он не должен увеличиваться или уменьшаться*/
	/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
	flex: 0 0 auto; }

Чтобы увидеть, как это все работает, посетите демо-страницу по ссылке в конце статьи.

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

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

Заключение

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

Предлагаю вам ознакомиться с полезными ресурсами, чтобы изучить более детально Flexbox-модель:

  • Краткое руководство по CSS Flexbox
  • Cайт, посвященный «крутой» технике работе с Flexbox
  • 5-минутный интерактивный урок по Flexbox

Мы надеемся, что метод фиксации «подвала», описанный в этой заметке, окажется для вас полезным и вы будете применять его в своей работе. Если вам известны какие-либо трюки на основе Flexbox, можете рассказать о них в комментариях под статьей.

Демо-страница

Оригинал статьи

Прочитано 642 раз

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


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: