Держите нижний колонтитул внизу

Если вы нашли эту статью полезной, подумайте о том, чтобы сделать пожертвование.

Так что недавно мне пришлось использовать тег ‹footer› для веб-сайта, который я создавал. Честно говоря, во всех моих проектах веб-разработки, которые я делал до сих пор, у меня никогда не было необходимости использовать нижний колонтитул. Так было до прошлой недели.

Подумаешь? Это просто тег нижнего колонтитула, который вы включаете перед закрытием тега body, верно? Конечно, но проблема с нижними колонтитулами в том, что по умолчанию они не остаются внизу. Позволь мне объяснить.

Если бы ваш тег body содержал следующее:

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

По большей части, если на вашем веб-сайте достаточно контента, чтобы заполнить страницу, нижний колонтитул должен быть опущен вниз. Однако на больших экранах это все еще может быть проблемой.

Итак, как нам сохранить этот надоедливый нижний колонтитул внизу? Что ж, сегодня я покажу три решения этой проблемы. Первое и самое простое решение — использовать flexbox, второе решение — использовать сетку, а окончательное решение — использовать оболочку. Хорошо, давайте начнем.

Гибкое решение

Во-первых, самое простое и, на мой взгляд, лучшее решение — использование flexbox. Я бы сказал, что это самое простое, потому что писать не так уж много кода и его легко понять.

Вот как выглядит наш HTML:

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

Вкратце, в нашем ‹body› есть ‹header›, ‹main› и ‹footer›. Внутри нашего ‹main› у нас есть ‹p›, который просто содержит текст lorem ipsum.

Вот как выглядит наш CSS:

Опять же очень кратко, я удаляю все отступы и поля для всего. Наше тело отображается как гибкое, имеет столбец «flex-direction», его минимальная высота составляет 100vh или 100 высоты окна просмотра, а цвет фона — синий. Что касается заголовка, я просто покрасил его в зеленый цвет. Наконец, я задал нижнему колонтитулу красный цвет фона и установил для его верхнего поля значение auto. Это важно, потому что без этого нижний колонтитул не остался бы внизу.

Теперь наш нижний колонтитул выглядит примерно так:

Позвольте мне объяснить, как это работает. Мы настраиваем наше «тело» так, чтобы оно отображалось как гибкий столбец, и устанавливаем его минимальную высоту, равную полному размеру высоты окна просмотра. Вы можете думать о ‹body› как о контейнере, который расширяется на всю высоту страницы. Теперь, установив для верхнего поля ‹footer› значение auto, мы, по сути, говорим ему оставаться внизу контейнера ‹body›. Именно так вы используете гибкость CSS, чтобы нижний колонтитул был внизу.

Сетевое решение

Давайте перейдем ко второму решению, используя сетку CSS. Не знаю, как вам, а мне сетка не нравится. Я бы предпочел использовать flexbox, но, как бы мне не хотелось это признавать, иногда просто невозможно избежать этого.

HTML-код будет точно таким же, как и для гибкого решения, единственное, что будет отличаться, — это тег ссылки CSS.

CSS для решения сетки выглядит примерно так:

Как и раньше, мы сначала удаляем все отступы и поля для всего. Затем мы делаем высоту html 100%, и я сделал весь текст белым. Далее, наше тело имеет минимальную высоту 100% и отображается в виде сетки с 3 рядами и имеет синий цвет фона. Эти строки будут заголовком, основным и нижним колонтитулом. Заголовок имеет зеленый цвет фона и будет начинаться и заканчиваться в первой строке из трех, которые мы определили для сетки. Наконец, наш нижний колонтитул будет иметь красный цвет фона и будет начинаться и заканчиваться в третьей строке нашей сетки.

Теперь позвольте мне объяснить, как это работает. В теле мы определяем три строки, первая и последняя имеют размер «auto», а строка в середине имеет установленный размер 1fr. Мы используем «авто» для первой и последней строк, чтобы они занимали только то пространство, которое им нужно.

Затем мы устанавливаем наш верхний колонтитул в первую строку сетки, сохраняя его наверху, а нижний колонтитул устанавливаем в последнюю строку нашей сетки, оставляя его внизу. Вот и все!

Вы можете вручную определить, что main находится во второй строке, как показано ниже:

main {
  grid-row-start: 2;
  grid-row-end: 2;
}

но я просто этого не делал.

Оберточное решение

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

Единственное отличие состоит в том, что мы используем ‹div› в качестве обертки для тегов ‹header› и ‹main›. Мы также даем ‹div› класс «обертки».

CSS для решения-оболочки выглядит следующим образом:

Как и раньше, мы сначала удаляем все отступы и поля со всего. Затем мы назначаем цвета фона для заголовка, основного и нижнего колонтитула. Заголовок зеленый, основной синий, а нижний колонтитул красный. Теперь мы должны определить и html, и тело как высоту 100%. Затем мы создаем класс под названием «обертка» и даем ему минимальную высоту 100%. Вот тут-то все и становится немного… грубым.

В основном, мы даем ему нижний отступ 30 пикселей, это будет размер нижнего колонтитула. Теперь в нашем нижнем колонтитуле мы задаем ему высоту 30 пикселей и верхнее поле -30 пикселей.

Поясню, почему это нужно делать именно так. Итак, у нашего main отступ снизу равен 30px. Это делается для того, чтобы, когда на экране достаточно контента, он не перетекал в наш нижний колонтитул, например:

Высота нижнего колонтитула также должна быть такой же высоты, как и нижний отступ для нашего основного, 30 пикселей. Это также должно быть применено к верхнему полю, но как отрицательное, если нет, то вы получите что-то вроде этого:

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

Вот и все, намного лучше.

Вывод

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

Все эти решения хороши, но лучшим, на мой взгляд, является гибкое. Его легко реализовать, и вам не нужно иметь дело с сеткой или оберткой. Решение с сеткой может быть лучшим, когда вы не можете использовать flexbox или застряли с использованием сетки, в то время как решение с оберткой может быть лучшим, когда вы уже знаете, насколько большим будет размер нижнего колонтитула.

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

Вы можете ознакомиться с полным кодом здесь.

Спасибо за чтение и хорошего чтения!