Как сместить футер в самый низ страницы: Flexbox vs. Grid

Как сместить футер в самый низ страницы: Flexbox vs. Grid

От автора: в течение многих лет я постоянно ссылалась на статью Мэтью Джеймса Тейлора, чтобы узнать, как разместить футер в нижней части страницы независимо от длины основного содержимого. Этот метод основывался на задании явной высоты футера, что являлось не масштабируемым, но очень хорошим решением до Flexbox.

Если вы в основном имеете дело с разработкой SPA, вы можете быть озадачены тем, почему эта проблема вообще все еще существует, но ведь есть возможность, что футер будет размещаться:

на странице входа

в блоге / новостных статьях (без рекламы…)

на промежуточных страницах потока, таких как страница подтверждения действия

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

на страницах со списком товаров

в описании события

Есть два способа справиться с этим с помощью современного CSS: flexbox и grid. Вот демо, по умолчанию используется метод flexbox. Если вы откроете полный Codepen, вы можете переключить значение переменной $method на grid, чтобы увидеть альтернативный метод.

Ниже демо-версии мы подробно рассмотрим оба способа:

Метод Flexbox

Для этого метода мы определяем следующее:

Как это работает

Во-первых, мы обеспечиваем, чтобы элемент body растягивался как минимум на всю высоту экрана min-height: 100vh. Это не вызовет переполнения, если контент короткий (исключение: некоторые мобильные браузеры), и позволит контенту увеличивать высоту всего контейнера по мере необходимости.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Параметр flex-direction: column поддерживает поведение нормального потока документа с точки зрения сохранения стекирования блочных элементов (что предполагает, что непосредственные потомки body действительно являются блочными элементами).

Преимущество flexbox заключается в использовании поведения margin: auto. Этот странный трюк приведет к тому, что поле заполняет все пространство между элементом, для которого свойство установлено, и его соседним элементов в соответствующем направлении. Установка margin-top: auto эффективно сдвигает футер в нижнюю часть экрана.

Проблемы

В демонстрации я добавил outline для main, чтобы продемонстрировать, что в методе flexbox элемент main не заполняет высоту. Вот почему мы должны использовать хитрость margin-top: auto. Это вряд ли имеет значение для вас, но если это так, посмотрите метод сетки, в котором элемент main растягивается, чтобы заполнить доступное пространство.

Метод сетки

Для этого метода мы задаем следующее:

Как это работает

Мы сохраняем для этого метода min-height: 100vh, но затем используем grid-template-rows для правильного размещения элементов.

Хитрый прием этого метода — использование специальной единицы измерения сетки — fr. Fr означает «часть», и, используя ее, мы запрашиваем, чтобы браузер вычислил «часть» доступного пространства, которое осталось для растягивания этого ряда или колонки. В этом случае она заполняет все доступное пространство между хэдером и футером, что также решает проблему метода flexbox.

Что лучше?

Увидев сетку, вы можете подумать, что она явно лучше. Однако, если вы добавляете больше элементов между хэдером и футером, вам необходимо обновить шаблон (или обеспечить соответствующие элементы оболочки, такие как div, чтобы не влиять на вложенную семантику / иерархию).

С другой стороны, метод flexbox может использоваться в различных шаблонах с несколькими блочными элементами в средней части — например, серией элементов <article> вместо одного <main> для страницы архива.

Как и всегда, это зависит от проекта. Но мы все можем согласиться с тем, что удивительно иметь эти современные методы макета CSS!

Автор: Stephanie Eckles

Источник: https://dev.to

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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