title: Why is my Footer not staying at bottom in Gatsby Site?
body: <p>So I wrapped my content in the layout component and all my other pages push the footer to the bottom because the content is bigger than the actual screen. However, I have one page that has less content and now my footer is awkwardly in the middle if I view it on a bigger height screen.</p>
  <p>So here is my footer css</p>
  <pre><code>      export const FooterContainer = styled.div`
          background-color: #101522;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: 0;
          width: 100%;
        `
  </code></pre>
  <p>My layout div css</p>
  <pre><code> .layout {
     padding-bottom: 160px;
     position: relative;
   }
  </code></pre>
  <p>My layout component</p>
  <pre><code>           return (
            &lt;&gt;
              &lt;Sidebar isOpen={isOpen} toggle={toggle} /&gt;
              &lt;Navbar toggle={toggle} /&gt;
              &lt;div className=&quot;layout&quot;&gt;
                &lt;main&gt;{children}&lt;/main&gt;
                &lt;Footer /&gt;
              &lt;/div&gt;
            &lt;/&gt;
          )
        }
  </code></pre>
  <p>Then in my page where my footer isn't sticking to the bottom this is my code</p>
  <pre><code>             &lt;Layout&gt;
            &lt;div className=&quot;resource__container&quot;&gt;
              &lt;h1 className=&quot;post__heading&quot;&gt;
                Here are some resources to learn web development
              &lt;/h1&gt;
              &lt;Posts posts={posts} key={posts.id} /&gt;
            &lt;/div&gt;
          &lt;/Layout&gt;
  </code></pre>
  <p>So here is a pic showing what is happening</p>
  <p>The top black bar is the Navbar</p>
  <p>The red section is my <code>.resource__container</code></p>
  <p>The white space below that is the <code>padding-bottom: 160px</code> from the <code>.layout &lt;div&gt;</code></p>
  <p>Then the last black space is the <code>footer</code></p>
  <p>After that it's just <code>&lt;main&gt;</code> but technically nothing there, so I don't why it isn't sticking to the bottom</p>
  <p><a href="https://i.stack.imgur.com/db17C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/db17C.png" alt="enter image description here" /></a></p>