Как прижать футер к низу страницы css grid

Как с помощью CSS прижать footer к низу страницы

Как с помощью CSS прижать footer к низу страницы

Одной из самых частых трудностей при вёрстке макета сайта, с которыми сталкивается верстальщик, как прижать footer к низу страницы с помощью CSS.

Существует как минимум четыре способа на CSS, однако с появлением CSS-grid, появился ещё один способ, который умещается всего лишь в строку кода. При этом, высота footer значения не имеет, что было важным для прошлых способов.

Как с помощью CSS-grid прижать footer к низу страницы

Для начала, приведу пример html кода:

<div >
<header>шапка сайта</header>
<article>область контента</article>
<footer>подвал сайта</footer>
</div>

Тут всё просто и особых объяснений не требуется. Контейнер с классом "wr" (от wrap), содержит три элемента: шапку, область контента и подвал.
Переходим к CSS:

Контейнеру "wr", мы устанавливаем минимальное отображение высотой в один экран. Отображаем элементы внутри контейнера как сетку. Задаём параметры ширины у элементов внутри контейнера.
Всё, это весь код.

How to Use CSS Grid for Sticky Headers and Footers

Take your JavaScript to the next level at Frontend Masters.

CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there&#8217;s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers. With a little adjustment in our thinking, we can pull off headers and footers that behave like they are fixed, or have that “sticky” treatment (not position: sticky , but the kind of footer that hugs the bottom of the screen even if there isn’t enough content to push it there, and is pushed away with more content).

Hopefully this sparks further interest in modern layouts, and if it does, I can’t recommend Rachel Andrew’s book The New CSS Layout strongly enough: it covers both of the major modern layout techniques, grid and flexbox.

What we’re making

Let’s implement a fairly classic HTML layout that consist of a header, main content and footer.

We’ll make a truly fixed footer, one that stays at the bottom of the viewport where the main content scrolls within itself, as needed, then later update the footer to be a more traditional sticky footer that starts at the bottom of the viewport, even if the main content is small, but gets pushed down as needed. Further, to broaden our exposure to grid, let’s design our main content holder so that it can either span the whole width of the viewport, or take up a nicely centered strip down the middle.

A fixed footer is slightly unusual. Footers are commonly designed to start at the bottom of the viewport, and get pushed down by main content as needed. But a persistent footer isn’t unheard of. Charles Schwab does it on their homepage. Either way, it’ll be fun to implement!

But before we move on, feel free to actually peek at the fixed footer implemented on the Charles Schwab site. Unsurprisingly, it uses fixed positioning, which means it has a hard-coded size. In fact, if we crack open DevTools, we see that right off the bat:

Not only that, but there’s the balance of making sure the main content doesn’t get hidden behind that fixed footer, which it does by setting hard-coded paddings (including 15px on the bottom of the <footer> element), margins (including 20px on <ul> in the footer), and even line breaks.

Let’s try to pull this off without any of these restrictions.

Our baseline styles

Let’s sketch out a bare minimum UI to get us started, then enhance our grid to match our goals. There’s a CodeSandbox below, plus additional ones for the subsequent steps that get us to the end result.

First, let’s do some prep work. We’ll make sure we’re using the whole height of the viewport, so when we add our grid, it’ll be easy to put the footer at the bottom (and keep it there). There’s only going to be one element inside the document&#8217;s <body> with an ID of #app , which will hold the <header , <main> and <footer> elements.

Next, let’s set up our header, main, and footer sections, as well as the grid they’ll all sit in. To be clear, this will not work the way we want right out of the gate. It’s just to get us started, with a base to build from.

We’ve created a simple one-column layout, with a width of 1fr . If that 1fr is new to you, it essentially means “take the remaining space” which, in this case, is the entire width of the grid container, #app .

We&#8217;ve also defined three rows:

The first and third rows, which will be our header and footer, respectively, are sized with auto, which means they&#8217;ll take up as much space as needed. In other words: no need for hard-coded sizes! This is a super important detail and a perfect example of how we benefit from using CSS Grid.

The middle row is where we’ll put our content. We’ve assigned it a size of 1fr which, again, just means it takes up all of the remaining space that’s left over from the other two rows. If you’re wondering why we aren’t making it auto as well, it’s because the entire grid spans the viewport’s whole height, so we need one section to grow and fill up any unused space. Note that we do not have, nor will we ever need at any point, any fixed heights, margins, paddings — or even line breaks! — to push things into place. Such is the good life when working with grid !

Shall we try some content?

You’ll notice in the Sandbox that I used React to build this demo, but since this isn’t a post about React, I won’t belabor those details; React has absolutely nothing to do with any of the CSS Grid work in this post. I’m only using it as an easy way to navigate between different chunks of markup. If you hate React, that’s fine: hopefully you can ignore it in this post.

We have Header , Main and Footer components that render the expected <header> , <main> and <footer> elements, respectively. And, of course, this all sits inside our #app container. Yes, in theory, #app should be an <article> element, semantically speaking, but that’s always looked weird to me. I just wanted to covey these details so we&#8217;re all one the same page as we plow ahead.

For the actual content, I have Billing and Settings sections that you can navigate between in the header. They both render fake, static content, and are only meant to show our layout in action. The Settings section will be the content that we put in a centered strip on our page, Billing will be the one that spans our whole page.

Here’s the Sandbox with what we have so far.

The Billing section looks good, but the Settings section pushes our footer off screen. Not only that, but if we scroll, the entire page scrolls, causing us to lose our header. That may be desirable in some cases, but we want both the header and footer to stay in view, so let’s fix that.

Fixed header, fixed footer

When we initially set up our grid, we gave it a height of 100vh, which is the entire height of the viewport. We then assigned the rows for the header and footer an auto height, and the main a height of 1fr to take up the remaining space. Unfortunately, when content exceeds the space available, it expanded beyond the viewport bounds, pushing our footer down and out of view.

The fix here is trivial: adding overflow: auto will cause our <main> element to scroll, while keeping our <header> and <footer> elements in place.

Here’s the updated demo that puts this to use.

Adjustable width main section

We want our <main> element to either span the whole width of the viewport, or be centered in a 600px space. You might think we could simply make <main> a 600px fixed width, with an auto margins on either side. But since this is a post about grid, let’s use moar grid. (Plus, as we’ll see later, a fixed width won’t work anyway).

To achieve our centered 600px element, we’ll actually make the <main> element a grid container. That’s right, a grid within a grid! Nesting grids is a totally legit approach, and will even get easier in the future when subgrid is officially supported across browsers. In this scenario, we’ll make <main> a grid with three column tracks of 1fr 600px 1fr or, stated simply, 600px in the middle, with the remaining space equally divided on the sides.

Now let’s position our the content in the grid. Our different modules all render in a <section> child. Let’s say that by default, content will occupy the middle section, unless it has a .full class, in which case it will span the entire grid width. We won’t use named areas here, and instead specify precise grid coordinates of the form [row-start] / [col-start] / [row-end] / [col-end] :

You might be surprised to see a col-end value of 4 , given that there’s only three columns. This is because the column and row values are column and row grid lines. It takes four grid lines to draw three grid columns.

Our <section> will always be in the first row, which is the only row. By default it’ll span column lines 2 through 3 , which is the middle column, unless the section has a full class on it, in which case it’ll span column lines 1 through 4 , which is all three columns.

Here’s an updated demo with this code. It&#8217;ll probably look good, depending on your CodeSandbox layout, but there’s still a problem. If you shrink the display to smaller than 600px, the content is abruptly truncated. We don’t really want a fixed 600px width in the middle. We want a width of up to 600px. It turns out grid has just the tool for us: the minmax() function. We specify a minimum width and a maximum width, and the grid will compute a value that falls in that range. That’s how we prevent the content from blowing out of the grid.

All we need to do is swap out that 600px value with minmax(0, 600px) :

Here’s the demo for the finished code.

One more approach: The traditional fixed footer

Earlier, we decided to prevent the footer from being pushed off the screen and did that by setting the <main> element’s overflow property to auto .

But, as we briefly called out, that might be a desirable effect. In fact, it’s more of a classic “sticky” footer that solves that annoying issue, and places the footer on the bottom edge of the viewport when the content is super short.

How could we keep all of our existing work, but allow the footer to get pushed down, instead of fixing itself to the bottom in persistent view?

Right now our content is in a grid with this HTML structure:

…where <main> is a grid container nested within the #app grid container, that contains one row and three columns that we use to position our module’s contents, which go in the <section> tag.

Let’s change it to this:

…and incorporate <footer> into the <main> element’s grid. We’ll start by updating our parent #app grid so that it now consists of two rows instead of three:

Just two rows, one for the header, and the other for everything else. Now let’s update the grid inside our <main> element:

We’ve introduced a new auto-sized row. That means we now have a 1fr row for our content, that holds our <section> , and an auto row for the footer.

Now we position our <footer> inside this grid, instead of directly in #app :

Since <main> is the element that has scrolling, and since this element now has our footer, we’ve achieved the sticky footer we want! This way, if <main> has content that exceeds the viewport, the whole thing will scroll, and that scrolling content will now include our footer, which sits at the very bottom of the screen as we’d expect.

Here’s an updated demo. Note that the footer will be at the bottom of the screen if possible; otherwise it’ll scroll as needed.

I made a few other small changes, like minor adjustments to paddings here and there; we can’t have any left or right paddings on <main> , because the <footer> would no longer go edge-to-edge.

I also made a last-minute adjustment during final edits to the <section> element—the one we enabled adjustable width content on. Specifically, I set its display to flex , its width to 100%, and its immediate descendant to overflow: auto . I did this so the <section> element&#8217;s content can scroll horizontally, within itself, if it exceeds our grid column boundary, but without allowing any vertical scrolling.

Without this change, the work we did would amount to the fixed footer approach we covered earlier. Making section> a flex container forces its immediate child — the <div> that contains the content — to take up all of the available vertical space. And, of course, setting that child div to overflow: auto enables scrolling. If you&#8217;re wondering why I didn&#8217;t just set the section&#8217;s overflow-x to auto , and overflow-y to visible, well, it turns out that&#8217;s not possible.

We haven’t done anything revolutionary in this post, and certainly nothing that couldn’t be accomplished before CSS Grid. Our fixed width <main> container could have been a block element with a max-width value of 600px , and auto margins on the left and right. Our fixed footer could have been made with position: fixed (just make sure the main content doesn’t overlap with it). And, of course, there are various ways to get a more traditional “sticky footer.”

But CSS Grid provides a single, uniform layout mechanism to accomplish all of this, and it’s fun to work with — honestly fun. In fact, the idea of moving the footer from fixed to sticky wasn’t even something I planned at first. I threw it in at the last minute because I thought the post was a bit too light without it. It was trivial to accomplish, basically moving grid rows around, not unlike putting lego blocks together. And again, these UIs were trivial. Imagine how brightly grid will shine with more ambitious designs!

Как прижать футер к низу страницы css grid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как прижать Footer к низу в Grid?

Делая дизайн на Grid столкнулся с вопросом, а как же прикрепить Footer внизу страницы, если мало контента. Гугл, видимо, знает столько же, сколько и я((
Даю ссылку на JSFiddle
Для самых сильных:

p.s. Sorry за префиксный мусор в коде

  • Вопрос задан более трёх лет назад
  • 5793 просмотра

vadimkot

UnluckySerivelha

Зачем фиксированный футер, если нужен прилипший, такое решение любой ребенок сделает, вопрос был в условиях Grid верстки

Как прижать футер к низу страницы?

Ankhena

Какая высота должна быть у сайта?
— минимально вся высота окна.
=> задаем для body min-height 100vh

Как свободное место должно распределяться по блокам?
— шапка должна занимать столько места, сколько ей нужно, подвал аналогично, а свободное место уходит в контентную часть.
=> переводим это на css
grid-template-rows: min-content 1fr min-content

MrShandy

gzY5bLe.jpg

Ankhena, работает, но панель навигации теперь занимает пол страницы.

Ankhena

Владимир Аршинов, логично, у вас же 4 строки, а я рассказала пример только для 3.

Как с помощью CSS прижать footer к низу страницы

Как с помощью CSS прижать footer к низу страницы

Одной из самых частых трудностей при вёрстке макета сайта, с которыми сталкивается верстальщик, как прижать footer к низу страницы с помощью CSS.

Существует как минимум четыре способа на CSS, однако с появлением CSS-grid, появился ещё один способ, который умещается всего лишь в строку кода. При этом, высота footer значения не имеет, что было важным для прошлых способов.

Как с помощью CSS-grid прижать footer к низу страницы

Для начала, приведу пример html кода:

<div >
<header>шапка сайта</header>
<article>область контента</article>
<footer>подвал сайта</footer>
</div>

Тут всё просто и особых объяснений не требуется. Контейнер с классом "wr" (от wrap), содержит три элемента: шапку, область контента и подвал.
Переходим к CSS:

Контейнеру "wr", мы устанавливаем минимальное отображение высотой в один экран. Отображаем элементы внутри контейнера как сетку. Задаём параметры ширины у элементов внутри контейнера.
Всё, это весь код.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *