Как использовать CSS Grid для закрепления хэдера и футера

Как использовать CSS Grid для закрепления хэдера и футера

От автора: CSS Grid — это набор свойств, призванных сделать макет проще, чем когда-либо. Как и почти всегда, есть некоторая кривая обучения, но, честно говоря, с Grid будет весело работать, когда вы освоите его. Одна из областей, в которой он хорош — это хэдер и футер. Немного изменив свое мышление, мы можем получить хэдер и футер, которые ведут себя так, как будто они зафиксированы, или имеют такую «липкую» обработку (нет position: sticky, но такой футер занимает нижнюю часть экрана, даже если на странице нет достаточно контента, чтобы сместить его туда).

Давайте реализуем довольно классический HTML-макет, состоящий из хэдера, основного содержимого и футера. Мы сделаем по-настоящему фиксированный футер, который будет оставаться в нижней части области просмотра, когда основное содержимое прокручивается по мере необходимости, а затем обновим его так, чтобы он стал более традиционным липким футером, который остается в нижней части области просмотра, даже если основной контент невелик. Кроме того, чтобы улучшить макет, давайте спроектируем контейнер основного контента так, чтобы он мог либо охватывать всю ширину области просмотра, либо занимать отцентрированную полосу посередине.

Как использовать CSS Grid для закрепления хэдера и футера

Как использовать CSS Grid для закрепления хэдера и футера

Фиксированный футер немного необычен. Футеры обычно создаются так, чтобы они начинались в нижней части области просмотра и при необходимости сдвигались вниз основным контентом. Но фиксированный футер не является чем-то необычным. Чарльз Шваб делает это на своей домашней странице. В любом случае, реализовать это будет весело!

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

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

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

Но прежде чем мы продолжим, взгляните на фиксированный футер, реализованный на сайте Charles Schwab. Неудивительно, что он использует фиксированное позиционирование, что означает, что он имеет жестко заданный размер. Фактически, если мы откроем DevTools, мы сразу увидим это:

Не только это, но основной контент не скрывается за фиксированным футером, что достигается путем установки жестко закодированных отступов (включая 15 пикселей внизу элемента <footer>), полей (включая 20 пикселей для ul в футере) и даже разрывы строк.

Как использовать CSS Grid для закрепления хэдера и футера

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

Базовые стили

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

Сначала займемся подготовительной работой. Мы постараемся использовать всю высоту области просмотра, поэтому, когда мы добавим сетку, будет легко разместить футер внизу (и оставить его там). Там должен быть только один элемент внутри body с идентификатором #app, который будет содержать элементы header, main и footer.

Затем давайте настроим разделы хэдера, основного содержимого и футера, а также сетку, в которой они все будут находиться. Чтобы было ясно, это не будет работать так, как мы хотим, сразу. Это просто для начала, база для строительства.

Мы создали простой макет с одним столбцом и шириной 1fr. Если 1fr в новизну для вас, это по существу означает «взять оставшееся пространство», что в данном случае является всей шириной контейнера сетки #app. Мы также определили три строки:

Первый и третий ряд, которые будут хэдером и футером, соответственно, имеют размер auto, что означает, что они будут занимать столько места, сколько необходимо. Другими словами: нет необходимости в жестко заданных размерах! Это очень важная деталь и прекрасный пример того, как мы получаем выгоду от использования CSS Grid.

В среднем ряду мы разместим наш контент. Мы назначили ему размер 1fr, что, опять же, просто означает, что он занимает все оставшееся пространство от двух других рядов. Если вам интересно, почему мы используем auto, то это потому, что вся сетка охватывает всю высоту области просмотра, поэтому нам нужна одна секция, которая будет увеличиваться и заполнять любое неиспользуемое пространство. Обратите внимание, что у нас нет и нам никогда не понадобится фиксированная высота, поля, отступы или даже разрывы строк! Таковы преимущества при работе с grid!

Может, попробуем какой-нибудь контент?

В Sandbox вы заметите, что я использовал React для создания этой демонстрации, но поскольку это не статья о React, я не буду вдаваться в подробности; React не имеет абсолютно ничего общего с работой над CSS Grid в этом посте. Я использую его только как простой способ перемещаться между разными фрагментами разметки. Если вы ненавидите React, ничего страшного: надеюсь, вы можете проигнорировать его в этом посте.

У нас есть компоненты Header, Main и Footer, которые задают ожидаемо элементы header, main и footer, соответственно. И, конечно же, все это находится внутри контейнера #app. Да, теоретически этот #app должен быть элементом

, если следовать семантике, но мне это всегда казалось странным. Я просто хотел собрать эти детали, пока мы продвигаемся вперед.

Что касается фактического контента, у меня есть разделы Billing и Settings, между которыми вы можете перемещаться в заголовке. Оба они отображают фиктивный статический контент и предназначены только для демонстрации нашего макета в действии. В разделе Settings будет контент, который мы разместим в полосе по центру на странице, а Billing будет охватывать всю страницу.

Вот Sandbox с тем, что у нас есть.

Раздел Billing выглядит хорошо, но раздел Settings смещает футер с экрана. Не только это — если мы прокручиваем вниз, прокручивается вся страница, из-за чего мы теряем хэдер. В некоторых случаях это может быть желательно, но мы хотим, чтобы и хэдер, и футер оставались в поле зрения, поэтому давайте исправим это.

Фиксированный хэдер, фиксированный футер

Когда мы изначально настраивали нашу сетку, мы задали ей высоту 100vh, что составляет всю высоту области просмотра. Затем мы присвоили строкам хэдера и футера автоматическую высоту, а для основного содержимого — высоту 1fr, чтобы занимать оставшееся пространство. К сожалению, когда контент выходит за пределы доступного пространства, он расширяется за пределы области просмотра, выталкивая футер вниз и за пределы поля зрения.

Исправление тривиально: добавление overflow: auto заставит элемент main прокручиваться, при этом элементы header и footer останутся на месте.

Вот обновленная демонстрация.

Регулируемая ширина основного содержимого

Мы хотим, чтобы элемент main либо занимал всю ширину области просмотра, либо располагался по центру в пространстве 600 пикселей. Вы можете подумать, что мы могли бы просто задать main фиксированную ширину 600 пикселей с автоматическими полями с обеих сторон. Но поскольку это пост о сетке, давайте воспользуемся сеткой Моара. (К тому же, как мы увидим позже, фиксированная ширина в любом случае работать не будет).

Чтобы получить центрированный элемент в 600 пикселей, мы фактически сделаем элемент main контейнером сетки. Правильно, сетка внутри сетки! Вложение сеток — это вполне нормальный подход, и в будущем это станет еще проще, когда подсетка будет официально поддерживаться во всех браузерах. В этом сценарии мы сделаем сетку main с тремя треками столбцов 1fr 600px 1fr или, проще говоря, 600 пикселей посередине, а оставшееся пространство равномерно разделено по сторонам.

Теперь давайте разместим контент в сетке. Все различные модули отображаются в дочернем элементе section. Предположим, что по умолчанию контент будет занимать средний раздел, если у него нет класса .full — в этом случае он будет охватывать всю ширину сетки. Мы не будем использовать именованные области, а вместо этого укажем точные координаты сетки формы [row-start] / [col-start] / [row-end] / [col-end]:

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

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

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

Вы можете быть удивлены, увидев значение col-end 4, учитывая, что колонок всего три. Это потому, что колонки и ряды задаются линиями сетки. Чтобы нарисовать три колонки сетки, требуется четыре линии сетки.

Как использовать CSS Grid для закрепления хэдера и футера

Наш section всегда будет в первом ряду, который является единственным рядом. По умолчанию он будет охватывать линии колонок от 2 до 3, что дает среднюю колонку, если section не имеет класса .full, в этом случае она будет охватить линии колонок от 1 до 4, то есть все три колонки.

Вот обновленная демонстрация с этим кодом. Это, вероятно, будет хорошо выглядеть, в зависимости от вашего макета CodeSandbox, но проблема все еще остается. Если уменьшить размер экрана до размера менее 600 пикселей, содержимое резко обрезается. На самом деле нам не нужна фиксированная ширина 600 пикселей по середине. Нам нужна ширина до 600 пикселей. Оказывается, у grid есть инструмент как раз для этого: функция minmax(). Мы указываем минимальную ширину и максимальную ширину, и сетка будет вычислять значение, попадающее в этот диапазон. Вот как мы предотвращаем выброс контента из сетки.

Все, что нам нужно сделать, это заменить значение 600px на minmax(0, 600px):

Вот демонстрация готового кода.

Еще один подход: традиционный фиксированный футер

Ранее мы решили не допускать смещения футера с экрана и сделали это, установив для свойства overflow элемента main значение auto.

Но, как мы вкратце отметили, это может быть желательным эффектом. Фактически, это скорее классический «липкий» футер, который решает эту досадную проблему и помещает футер на нижний край области просмотра, когда контент очень короткий.

Как использовать CSS Grid для закрепления хэдера и футера

Как мы могли бы сохранить всю нашу текущую работу, но позволить футеру сдвинуться вниз, вместо того, чтобы он фиксировался внизу контента? Прямо сейчас наш контент находится в сетке с такой структурой HTML:

Где контейнер сетки main, вложенный в контейнер сетки #app, содержит один ряд и три колонки, которые мы используем для размещения содержимого модуля, которое входит в тег section. Изменим код:

И включим footer в сетку элемента main. Мы начнем с обновления родительской сетки #app, чтобы теперь она состояла из двух рядов вместо трех:

Всего два ряда, один для заголовка, а другой для всего остального. Теперь давайте обновим сетку внутри элемента main:

Мы ввели новый ряд с автоматическим размером. Это означает, что теперь у нас есть ряд в 1fr для контента, который содержит section, и ряд auto для футера. Теперь мы размещаем

внутри этой сетки, а не непосредственно в #app:

Поскольку main — это элемент с прокруткой, и поскольку теперь у этого элемента есть футер, мы достигли желаемого результата! Таким образом, если в main есть содержимое, которое превышает по длине область просмотра, все это будет прокручиваться, и это прокручиваемое содержимое теперь будет включать наш футер, который находится в самом низу экрана, как мы и ожидали.

Вот обновленная демонстрация. Обратите внимание, что футер будет по возможности внизу экрана; в противном случае он будет прокручиваться по мере необходимости.

Я внес несколько других небольших изменений, например, небольшие корректировки отступов здесь и там; у нас не может быть никаких левых или правых отступов в main, потому что footer больше не будет растягиваться от края до края.

Я также внес в последний момент корректировку во время окончательного редактирования элемента section — тот, который мы включили для содержимого с регулируемой шириной. В частности, я установил для него значение display flex, ширину 100%, а для его непосредственного потомка — overflow: auto. Я сделал это для того, чтобы содержимое элемента section могло прокручиваться горизонтально, если оно превышает границу колонки сетки, но без вертикальной прокрутки.

Без этого изменения проделанная нами работа сводилась бы к подходу с фиксированным футером, который мы рассмотрели ранее. Создание гибкого контейнера section заставляет его непосредственный дочерний элемент div, содержащий контент, занимать все доступное вертикальное пространство. И, конечно же, установка для этого дочернего div overflow: auto для включения прокрутки. Если вам интересно, почему я просто не установил для section overflow-x со значением auto и overflow-y со значением visible, что ж, оказывается, что это невозможно.

Мысли напоследок

В этом посте мы не сделали ничего революционного, и уж точно ничего такого, чего нельзя было бы сделать до CSS Grid. Наш контейнер фиксированной ширины main мог бы быть блочным элементом со значением max-width 600px и автоматическими полями слева и справа. Наш фиксированный футер можно было бы сделать с помощью position: fixed (просто убедитесь, что основной контент не пересекается с ним). И, конечно же, существуют различные способы получить более традиционный «липкий футер».

Но CSS Grid предоставляет единый унифицированный механизм компоновки для выполнения всего этого, и работать с ним весело — честно, весело. На самом деле преобразовать футер из фиксированного в липкий я поначалу даже не планировала. Я добавил это в последнюю минуту, потому что подумал, что без этого пост не будет полным. Это было несложно, просто перемещая ряды сетки, как будто собирать блоки лего вместе. И снова эти пользовательские интерфейсы были банальными. Представьте, как ярко засияет сетка в более грандиозных макетах!

Автор: Adam Rackis

Источник: https://css-tricks.com

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

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

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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

Комментирование закрыто.