title: How to keep content inside Footer and Header in React Component?
body: <p>I know this might be asked a lot but somehow I can't find the solution. My project in React and my top component is setup up like this: </p>
  
  <pre><code>&lt;Provider store={store}&gt;
    &lt;Router&gt;
      &lt;Header /&gt;
      &lt;Switch&gt;
        &lt;All the routes /&gt;
      &lt;/Switch&gt;
      &lt;Footer /&gt;
    &lt;/Router&gt;
  &lt;/Provider&gt;
  </code></pre>
  
  <p>As you can see I want to use Header and Footer in all my pages. With my current setup, it works when my content height is bigger than view-height. I mean footer stays always on the bottom. The problem becomes on my smaller pages where the page content is smaller than view-height but my footer is still slightly below the view-height. <br/></p>
  
  <p>My current css code (didn't include unnecessary code): <br/>
  Header</p>
  
  <pre class="lang-css prettyprint-override"><code>padding: "0.2em 4em"
  </code></pre>
  
  <p>Content-Wrapper</p>
  
  <pre class="lang-css prettyprint-override"><code>minHeight: "100%",
  </code></pre>
  
  <p>Footer </p>
  
  <pre class="lang-css prettyprint-override"><code>padding: "3em"
  </code></pre>
  
  <p>One of the pages on the link (that shows how footer is below the <code>vh</code>. Header stays at the top as a default block element and is fine ): <a href="https://i.stack.imgur.com/lWCXS.png" rel="nofollow noreferrer">Result</a></p>