Flexbox Sticky Footer
Back in the days of floats and jQuery there were all sorts of hacks that were used to stick your footer at the end of the page if your content didn’t push it to the bottom.
But flexbox solves that pretty easily in just a few lines of CSS.
Suppose your page has an HTML structure like so:
And you want your footer to stick to the bottom of the page regardless of the content of main. All you have to do is the following.
Pretty simple right? No manually assigning heights to your header, main or footer — no checking the height of the page in javascript it just works.
How to Build a Responsive, Multi-Level, Sticky Footer With Flexbox
Anna Monus Last updated Jun 5, 2019
In this tutorial, I’ll show you how to use flexbox to create a responsive, multi-level, multi-column footer that sticks to the bottom of the page, no matter what.
What We’re Going to Build
Here’s the demo we’re building. Check out the full screen version to properly appreciate its responsiveness!
Feel free to add some content to the <div ></div> to see how the sticky aspect of this footer works too.
Flexbox is Great for Footers
Flexbox makes it possible to build flexible layouts that naturally adapt to different viewport sizes. Multi-level, multi-column footers are a good example of taking advantage of flexbox’s unique capabilities, specifically:
- the flex-grow property allows us to stick the footer to the bottom of the page no matter what,
- the flex-wrap property lets columns automatically wrap based on the viewport size of the user’s device,
- the justify-content property makes it possible to display the columns in different arrangements ( space-around , space-between , center , etc).
Once you’ve explored what flexbox can do for your footer layout, you’ll be free to get creative and see what is possible. Footers are the ideal place to help users continue on their journey; if they’ve reached the bottom of the page but still haven’t found what they were looking for, consider adding:
- Detailed navigation
- Calls to action
- Newsletter signups
- Social links
- Reassuring proof, such as awards, commendations, (genuine) privacy badges etc.
- Links for support or online help
- Branding
- Contact details
- Perhaps a reminder of your website’s personality to raise a smile or encourage the user that it’s worth hanging around
Footer Structure
Although it’s also possible to create a footer with CSS grid, flexbox lets us build multiple footer levels on top of each other, where each level wraps independently. The footer we will create in this tutorial has three levels, each of which is a separate flex container:
- main footer: four columns, with a newsletter signup form in the last column,
- social footer: six social icons centered on the page (this level won’t wrap),
- legal footer: three columns where the first two columns are positioned to the left, while the last column to the right of the screen.
In addition, the footer will also stick to the bottom of the page—even when there isn’t enough content above it. We’ll achieve this sticky effect by making the entire <body> tag a column-based flex container.
1. Set Up the HTML
Let’s start with the HTML. I’ve placed all the content into a semantic <footer> tag and the three footer levels into three <section> elements. For the social footer, I’ve used Font Awesome icon fonts.
2. Define the Basic CSS Styles
Before getting started with the layout, let’s set up some basic CSS styles such as colors, fonts, and spacing. I’ve used the following style rules, however, you can use any other styling that matches your design.
3. Stick the Footer to the Bottom of the Page
With flexbox, we can create a sticky footer with just a couple of lines of CSS. The code below makes the entire body of the page a flex container which is at least 100% of the viewport’s height ( 100vh ).
The real trick lies in the addition of the flex: 1; rule to the .container element (which is above <footer> in the HTML). The flex property is a shorthand for the flex-grow , flex-shrink , and flex-basis properties. When it has just one value, it refers to flex-grow , with flex-shrink and flex-basis being set to their default values.
The flex-grow property defines what happens inside the flex container when there’s too much positive space (i.e. the flex items don’t span across the whole container). Its default value is 0 which means that all the remaining space will be equally allocated between the items. So, when we set flex-grow to 1 , .container will get all the remaining space on the screen. At the same time, <footer> will get no extra space, so it will be automatically pushed down to the bottom of the page.
4. Line Up the Main Footer
Now, that the footer is neatly stuck to the bottom of the page, it’s time to line up the columns of the main footer.
The .ft-main element will be the flex container and the flex-wrap property will let the footer wrap into multiple rows based on the viewport size. To prevent columns being too narrow, I’ve also set a 200px minimum width for each flex item.
The main footer doesn’t use any specific alignment properties on smaller screens. As a result, flexbox automatically aligns each column to the start of the main axis (which, in the default case, is the left of the screen).
However, on larger screens, it looks much better when space is allocated more precisely. So, I’ve set justify-content to space-around for medium-size and to space-evenly for large screens. When you are creating another footer layout, I’d recommend some experimentation with different values of justify-content so that you can see which one fits best with your design.
5. Style the Newsletter Form
The last column of the main footer contains a newsletter signup form which requires some extra attention. I’ve added the flexbox layout to the <form> element, too, so that the input field and the submit button will be neatly lined up on all viewports. Thanks to the flex-wrap: wrap; rule, the submit button will nicely slip below the input field when the viewport gets very small.
Besides, when the newsletter form wraps, there will also be some white space between the two elements due to the margin-top property set on the submit button. I’ve also added the same margin-top value to the input field so that flexbox will display it precisely next to the submit button on larger viewports.
6. Line Up the Social Footer
Creating the layout of the social footer is relatively simple, as it’s just an unordered list of a couple of small icons. As the icons are really small, this footer level doesn’t need to wrap. The justify-content: center; rule aligns it to the center of the main axis at every screen size.
7. Line Up the Legal Footer
The legal footer contains three elements: two links on the left and a copyright notice on the right. To achieve this layout, we can use the same flexbox trick as for the sticky footer. There, we have used the flex: 1; rule on the .container element, so flexbox allocated the entire positive space to it and pushed the footer to the very bottom of the page. Here, we can do the same thing.
Although .ft-legal-list is a row-based flex container while .container is column-based, we can follow the same logic. If we set flex-grow to 1 for the second column, it will automatically push the copyright notice to the right of the screen.
On mobile viewports, everything looks nice, too. In this case, flexbox displays all three elements below each other, aligned to the left of the screen.
Check Out the Demo
And, that’s all; our multi-level, multi-column, responsive, sticky footer is done! Check out the demo again to remind yourself how it looks like at different viewport sizes:
Conclusion
Flexbox allows us to create complex flexible layouts with much less code than before. Using the techniques and tricks presented in this tutorial, you can create any footer layout you want, with any number of levels and columns.
The biggest advantage of flexbox footers is that you can use different wrapping, sizing, and alignment rules for each level. As a result, you can keep the footer completely content-aware without having to use JavaScript or (many) media queries.
Learn Flexbox Basics
Flexbox syntax is varied and often confusing! Even if you’re familiar with flexbox, it’s always worth reminding yourself of the basics.
Sticky footers
Шаблон нижнего колонтитула — это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. Рассмотрим два способа, как этого достичь.
Requirements
Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:
- Нижний колонтитул прилипает к нижней части области просмотра, когда содержание короткое.
- Если содержимое страницы выходит за нижнюю часть области просмотра, нижний колонтитул располагается ниже содержимого, как обычно.
The recipe
Примечание: In this example and the following one we are using a wrapper set to min-height: 100% in order that our live example works. You could also achieve this for a full page by setting a min-height of 100vh on the <body> and then using it as your grid container.
Выбор сделан
В приведённом выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100% , что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаём сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.
При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое — на дорожку 1fr , а нижний колонтитул — в конечную дорожку с автоматическими размерами. Трек 1fr будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.
Alternate method
If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.
The flexbox example starts out in the same way, but we use display:flex rather than display:grid on the .wrapper ; we also set flex-direction to column . Then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area.
Прижать футер с помощью Flexbox
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления Flexbox разработчики использовали отрицательные margin , чтобы заставить footer опускаться до нижней части страницы. К счастью, нам больше не нужен такой хак!
В этой статье мы покажем вам простую технику, которая позволяет вам создать прилипающий футер с помощью Flexbox. Для его реализации требуется всего несколько строк кода и несколько минут.
HTML-код
В нашем HTML-файле мы создаем заголовок, два абзаца с текстом lorem ipsum и footer, чтобы мы могли легко проверить функциональность прилипающего футера. Откройте редактор кода, создайте новую папку (или проект, в зависимости от редактора кода) и пустой файл index.html внутри него. Затем добавьте следующий код:
CSS-код
Чтобы наша демо-версия работала, давайте запустим наш CSS-файл с простыми базовыми стилями. Однако обратите внимание, что эти базовые стили являются всего лишь рекомендациями, и вы можете использовать любые другие стили вместо них — они не требуются для функциональных возможностей прилипающего footer.
Любишь играть и хочешь быть в курсе игровых событий? — Новостной портал о всём что происходит в видеоигровой индустрии. Будь всегда в курсе обо всем из мира игр, получи самые свежие обзоры событий, читай анонсы, статьи и игровые новости.
Создайте файл style.css в той же папке, где находится ваш файл index.html. Затем добавьте следующий код:
Стили Footer
Теперь мы также добавили несколько стилей CSS в footer, однако отметим, что это все еще не функциональность прилипающего футера. Вы можете изменить эти основные стили footer на любой другой дизайн, который вам нравится.
Добавьте следующий код в файл stlye.css под предыдущим блоком CSS:
Если вы посмотрите демоверсию сейчас, она будет выглядеть следующим образом:
Как видите, футер отображается в середине экрана из-за недостатка содержимого. Мы будем толкать его вниз на следующем шаге с помощью Flexbox.
Делаем футер прилипающим с Flexbox
Теперь давайте посмотрим код CSS, который нам нужно использовать для создания прилипающего футера с помощью Flexbox. На самом деле это всего лишь пять CSS-правил. Вы можете использовать эту технику с любым видом футера в любом браузере, который поддерживает Flexbox. Поддержка Flexbox довольно хороша, в настоящее время 97,93% всех используемых браузеров поддерживают его во всем мире, и со временем он станет еще лучше.
Вот код, который нужно добавить в файл style.css. В идеале вы должны добавить этот фрагмент перед общими стилями нижнего колонтитула (добавленные на предыдущем шаге):
В приведенном выше коде мы создали Flex-макет на основе столбцов с помощью display: flex; и flex-direction: column; правила. В результате весь тег работает как Flexbox — с .content вверху и внизу экрана.
Минимальная высота: 100vh; Правило использует модуль vh viewport и гарантирует, что элемент body охватывает всю высоту области просмотра.
Мы также использовали свойства flex и flex-shrink. Свойство flex является сокращенным свойством, которое может иметь разное количество значений. Когда он имеет только одно значение, он обозначает flex-grow, который определяет выделение дополнительного пространства на экране (если оно есть). Итак, flex: 1; Правило означает, что основное содержимое (.content) должно занимать все дополнительное место на экране.
Чтобы уравновесить этот эффект, мы также используем свойство flex-shrink для нижнего колонтитула со значением 0. Это свойство определяет, что происходит, когда на экране недостаточно места. Если его значение равно 0, это означает, что этот элемент не должен уменьшаться, что бы ни происходило. Таким образом, нам не нужно бояться, что нижний колонтитул каким-то образом исчезнет (или уменьшится) на экране.
Теперь, если вы посмотрите на демонстрацию, вы увидите, что браузер добавил нужное количество пустого пространства в нижнюю часть содержимого, а нижний колонтитул прилипает к нижней части страницы:
Вы также можете поэкспериментировать с добавлением контента на страницу. Вы увидите, что когда на экране нет лишнего пространства и страница становится прокручиваемой, нижний колонтитул ведет себя как обычный нижний колонтитул. Он не будет прилипать к нижней части страницы, а просто прокручивает вверх и вниз остальное содержимое.