Сейчас нам предстоит поработать с файлом _core.scss, в котором будут размещены базовые элементы, применимые для всех страниц проекта. Они будут выравнивать содержимое по центру и также прижимать футер.

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

фото 2

Разобьём её на такие базовые блоки:

  • header;
  • slider;
  • features;
  • mini-catalog;
  • additions;
  • footer

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

Для того, чтобы прибить футер, воспользуемся обёрткой wrapper, внутри которой будут content и footer. Дополнительный класс center добавим, как нетрудно догадаться, для выравнивания по центру. Таким образом, базовая структура для индексной страницы будет иметь вот такой вид.

<div class="wrapper center">

	<div class="content">
		
		<header></header>
		
		<div class="slider"></div>
		
		<div class="features"></div>
		
		<div class="mini-catalog"></div>

		<div class="additions"></div>
		
		<div class="slider"></div>

	</div>

	<footer></footer>

</div> 

А стили css примут следующий вид.

html, body {
  height: 100%;
}
.wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.content {
	flex: 1 0 auto;
}
.footer {
	flex: 0 0 auto;
}
.center {
	max-width: $desktop-width;
	margin: 0 auto;
} 

Идея проста. Мы используем флексы, задаём вертикальное направление, и растягиваем общий контейнер на всю ширину экрана. При этом параметр flex: 1 задаёт поведение элемента content, заставляя его расширяться, поглощая всё свободное пространство.

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

Summary
Как прибить футер: способ с применением флексов, не зависящий от высоты подвала
Article Name
Как прибить футер: способ с применением флексов, не зависящий от высоты подвала
Description
В статье описано, как сформировать структуру главной страницы интернет-магазина, показано, как прибить футер к нижней части экрана и как центрировать элементы.
Author
Publisher Name
Avavax.ru
Publisher Logo