loading...
Cover image for 100% height to all divs - Gatsby

100% height to all divs - Gatsby

hzburki profile image Haseeb Burki 惻2 min read

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.

What we Have!

What we Have!

What we Want!

What we Want!

The Simple Solution

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

But!!! šŸ˜®šŸ˜®šŸ˜®

gatsby html structure
Additional div Highlighted

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

Gatsby CSS - 100% Height

Footer pushed down by content

This solution is based on a github thread.

Discussion

pic
Editor guide
Collapse
giacomocerquone profile image
Giacomo Cerquone

Better solution avoiding div[role="group"][tabindex] is targeting #gatsby-focus-wrapper

Collapse
hzburki profile image
Haseeb Burki Author

Cool! I'll try this and add it to the blog šŸ‘

Collapse
sanyprovi profile image
sany-provi

Hey Hasseb! thanks for share this solution!
One issue: when i try to scroll in my iPhone, the scroll does not seems right, its like im scrolling two layers at the same time... did you know why this happen?

Collapse
hzburki profile image
Haseeb Burki Author

Hey, I don't understand what you mean by two layers at the same time. It might be easier if you provide a video or GIF.

Also make sure that it's not caused by some other style properties. If that's not the case, if you can provide a repo with the reproduce-able error I'll be happy to look into it.