title: Footer comes up along with Dev Console view
body: <p>I'm trying to create a footer but when ever I open my console view on Chrome the footer comes up along with the console. I've looked at many other people having the same issue but they fixed it by setting the position of the footer to fixed or absolute, but when I try both I still get the same result. </p>
  
  <p>Threads I've looked at:
  <a href="https://stackoverflow.com/questions/42407915/footer-goes-up-whenever-i-open-chrome-console">Footer goes up whenever i open Chrome Console</a>
  <a href="https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page">How do you get the footer to stay at the bottom of a Web page?</a></p>
  
  <p>Here is what my CSS looks like currently:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    min-height: 100%;
  }
  
  .footer {
    width: 100%;
    bottom: 0px;
    left: 0px;
    height: 100px;
    position: fixed;
    background-color: #727272;
  }
  
  .footer p {
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer"&gt;
    &lt;div class="wrapper"&gt;
      &lt;p&gt;testing&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the <code>wrapper</code> class only creates margins on the left and the right.</p>