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

Gatsby uses @reach/router which wraps the Layout component in an additional div. So you can see how adding style to a javascript injected div without any class or id

But!!! 😮😮😮

Gatsby uses @reach/router which wraps the Layout component in an additional div. So you can see how adding style to a javascript injected div without any class or id might be an issue.

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

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 !!

The footer is now pushed down by the content.

This solution is based on a github thread.