От автора: в течение многих лет я постоянно ссылалась на статью Мэтью Джеймса Тейлора, чтобы узнать, как разместить футер в нижней части страницы независимо от длины основного содержимого. Этот метод основывался на задании явной высоты футера, что являлось не масштабируемым, но очень хорошим решением до Flexbox.
Если вы в основном имеете дело с разработкой SPA, вы можете быть озадачены тем, почему эта проблема вообще все еще существует, но ведь есть возможность, что футер будет размещаться:
на странице входа
в блоге / новостных статьях (без рекламы…)
на промежуточных страницах потока, таких как страница подтверждения действия
на страницах со списком товаров
в описании события
Есть два способа справиться с этим с помощью современного CSS: flexbox и grid. Вот демо, по умолчанию используется метод flexbox. Если вы откроете полный Codepen, вы можете переключить значение переменной $method на grid, чтобы увидеть альтернативный метод.
Ниже демо-версии мы подробно рассмотрим оба способа:
Метод Flexbox
Для этого метода мы определяем следующее:
body { min-height: 100vh; display: flex; flex-direction: column;
} footer { margin-top: auto;
} // Optional
main { margin: 0 auto; // or: align-self: center max-width: 80ch;
}
Как это работает
Во-первых, мы обеспечиваем, чтобы элемент body растягивался как минимум на всю высоту экрана min-height: 100vh. Это не вызовет переполнения, если контент короткий (исключение: некоторые мобильные браузеры), и позволит контенту увеличивать высоту всего контейнера по мере необходимости.
Параметр flex-direction: column поддерживает поведение нормального потока документа с точки зрения сохранения стекирования блочных элементов (что предполагает, что непосредственные потомки body действительно являются блочными элементами).
Преимущество flexbox заключается в использовании поведения margin: auto. Этот странный трюк приведет к тому, что поле заполняет все пространство между элементом, для которого свойство установлено, и его соседним элементов в соответствующем направлении. Установка margin-top: auto эффективно сдвигает футер в нижнюю часть экрана.
Проблемы
В демонстрации я добавил outline для main, чтобы продемонстрировать, что в методе flexbox элемент main не заполняет высоту. Вот почему мы должны использовать хитрость margin-top: auto. Это вряд ли имеет значение для вас, но если это так, посмотрите метод сетки, в котором элемент main растягивается, чтобы заполнить доступное пространство.
Метод сетки
Для этого метода мы задаем следующее:
body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;
} // Optional
main { margin: 0 auto; max-width: 80ch;
}
Как это работает
Мы сохраняем для этого метода min-height: 100vh, но затем используем grid-template-rows для правильного размещения элементов.
Хитрый прием этого метода — использование специальной единицы измерения сетки — fr. Fr означает «часть», и, используя ее, мы запрашиваем, чтобы браузер вычислил «часть» доступного пространства, которое осталось для растягивания этого ряда или колонки. В этом случае она заполняет все доступное пространство между хэдером и футером, что также решает проблему метода flexbox.
Что лучше?
Увидев сетку, вы можете подумать, что она явно лучше. Однако, если вы добавляете больше элементов между хэдером и футером, вам необходимо обновить шаблон (или обеспечить соответствующие элементы оболочки, такие как div, чтобы не влиять на вложенную семантику / иерархию).
С другой стороны, метод flexbox может использоваться в различных шаблонах с несколькими блочными элементами в средней части — например, серией элементов <article> вместо одного <main> для страницы архива.
Как и всегда, это зависит от проекта. Но мы все можем согласиться с тем, что удивительно иметь эти современные методы макета CSS!
Автор: Stephanie Eckles
Источник: https://dev.to
Редакция: Команда webformyself.
