DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Chrissie
Chrissie

Posted on • Updated on

Footer bottom in GastbyJS

I have been building my portfolio website and choose Gatsby. One problem that I encountered early on was making my footer stick at the bottom of the page. In this article, I'll be sharing how I overcame it.

Note: I used the starter kit Gatsby-starter-default as a starting point.

<div className="site-content">
   <Header siteTitle={data.site.siteMetadata.title} />
   <main>{children}</main>
   <footer>
      Β© {new Date().getFullYear()}, Built with
     {` `}
     <a href="https://www.gatsbyjs.org">Gatsby</a>
   </footer>
 </div>
Enter fullscreen mode Exit fullscreen mode

First, in the layout.js file found in the component folder, wrap the header, main, and footer element in a div and give it a class. The class name doesn't matter.

.site-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

Then in the layout.css file found in the same folder, write the following code. This will make your footer stick to the bottom of your page.

Top comments (1)

Collapse
 
jesusalbertokiz profile image
Jesus Alberto Mora Lozada

Has salvado mi proyecto, eres un sol β™₯

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-