Javascript is required
·
2 min read
·
1584 views

Sticky Footer in GatsbyJS using Flexbox

Sticky Footer in GatsbyJS using Flexbox Image

I recently developed some static websites based on GatsbyJS with a sticky footer. A sticky footer is always positioned on the bottom of the page, even for sparse content.

Unfortunately, I had some struggles solving this, and I want to share my learnings with you.

Non-GatsbyJS solution

In a traditional HTML + CSS + JavaScript application, we can use different ways to implement such a fixed footer, but I prefer the Flexbox solution of Philip Walton.

Flexbox provides a friendly solution for the sticky footer problem. It can be used to layout content in a horizontal and vertical direction. So we need to wrap the vertical sections (header, content, footer) in a flex container and choose which one should expand. In our case, we want the content to take up all the available space in the container automatically.

Following, you can see his solution:

1<body class="site">
2  <header>…</header>
3  <main class="site-content">…</main>
4  <footer>…</footer>
5</body>

The corresponding CSS classes:

1.site {
2  display: flex;
3  min-height: 100vh;
4  flex-direction: column;
5}
6
7.site-content {
8  flex: 1;
9}

Take a look at the live demo.

GatsbyJS solution

GatsbyJS is based on React; therefore, we have to think differently.

The basic layout.js file from the official GatsbyJS default starter has a similar structure like the following example:

1const Layout = ({ children }) => (
2  <StaticQuery
3    query={graphql`
4      query SiteTitleQuery {
5        site {
6          siteMetadata {
7            title
8          }
9        }
10      }
11    `}
12    render={data => (
13      <>
14        <Helmet
15          title={data.site.siteMetadata.title}
16          meta={[
17            { name: 'description', content: 'Sample' },
18            { name: 'keywords', content: 'sample, something' },
19          ]}
20        >
21          <html lang="en" />
22        </Helmet>
23        <Header siteTitle={data.site.siteMetadata.title} />
24        <div>{children}</div>
25        <Footer />
26      </>
27    )}
28  />
29);
30
31export default Layout;

So if we would style <body></body> and the <div>{children}</div> as proposed in Philip Walton's solution it would not work.

But why? Because it would mean that the <Footer/> component has to be a direct child of the <body> tag, which it isn't due to GatsbyJS's and React's way of building the HTML document.

To solve the problem, I added a new <div></div> tag, which should represent the <body> tag of the example mentioned above.

So my layout.js looks this way:

1const Layout = ({ children }) => (
2  <StaticQuery
3    query={graphql`
4      query SiteTitleQuery {
5        site {
6          siteMetadata {
7            title
8          }
9        }
10      }
11    `}
12    render={data => (
13      <>
14        <Helmet
15          title={data.site.siteMetadata.title}
16          meta={[
17            { name: 'description', content: 'Sample' },
18            { name: 'keywords', content: 'sample, something' },
19          ]}
20        >
21          <html lang="en" />
22        </Helmet>
23        <div className="site">
24          <Header siteTitle={data.site.siteMetadata.title} />
25          <div className="site-content">{children}</div>
26          <Footer />
27        </div>
28      </>
29    )}
30  />
31);
32
33export default Layout;

The CSS:

1.site {
2  display: flex;
3  min-height: 100vh;
4  flex-direction: column;
5}
6
7.site-content {
8  flex-grow: 1;
9}

You can see a working example on my GitHub Traffic Viewer website. The first page shows spare content, but the footer is stuck to the bottom. If you sign in and see the result list, the footer is also shown at the bottom of the page.

Example Website

I hope this post is helpful if you try implementing a sticky footer on a GatsbyJS website.

Happy Coding!

I will never share any of your personal data. You can unsubscribe at any time.

If you found this article helpful.You will love these ones as well.
The 10 Favorite Features of My Developer Portfolio Website Image

The 10 Favorite Features of My Developer Portfolio Website

The Engineering Behind My Portfolio Website Image

The Engineering Behind My Portfolio Website

Unlocking the Power of v-for Loops in Vue With These Useful Tips Image

Unlocking the Power of v-for Loops in Vue With These Useful Tips

Focus & Code Diff in Nuxt Content Code Blocks Image

Focus & Code Diff in Nuxt Content Code Blocks