Use Case

A simple UI containing a header, main and footer.

The footer should stick to the bottom if content above it (main) does not fill the whole view and get pushed down if the content (main) exceeds the view height.

The Simple Solution

My first thought was assigning all html tags above the div which holds the <main></main> tags height: '100%'.

But!!! 😮😮😮

Gatsby uses @reach/router which wraps the Layout component in an additional div. This is done so,

@reach/router can automatically manage the focus as part of making sure sites are usable by screen readers.

So you can see how adding style to a javascript injected div without any class or id might be an issue.

The Real Solution

Well the real solution is actually still the same, we need to assign a height: '100%' to all parent divs.

• Create a new css file and name it global.css. I've put it in a separate styles folder in my repo.

/* 
 * Purpose:
 * Assign height: "100%" to
 * html, body, #___gatsby &  
 * div with role="group"
*/

html, body, #___gatsby {
    height: 100%;
}

body {
    margin: 0px;
}

div[role="group"][tabindex] {
    height: 100%;
}

• In the root of your directory, look for gatsby-browser.js and import global.css.

import './src/styles/global.css'

• I like to start my projects from scratch. This is my take on Layout Component.

<div style={{
  height: '100%',
  display: 'flex',
  flexDirection: "column"
}}>
  <header>
    <Header siteTitle={data.site.siteMetadata.title} />
  </header>

  <main 
    style={{
      backgroundColor: 'pink',
      flexGrow: 1
    }}
  >{children}</main>

  <footer style={{
    backgroundColor: 'aquamarine'
  }}>
    © {new Date().getFullYear()}, Built with
    {` `}
    <a href="https://www.gatsbyjs.org">Gatsby</a>
  </footer>
</div>

The Result as Promised !!

This solution is based on a github thread.