title: Footer doesn't reach end in chrome
body: <p>This is how the footer looks in Firefox (how it SHOULD look), bordering on Firebug, filling out all of its height.</p>
  
  <p><a href="https://i.stack.imgur.com/EG5Lh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EG5Lh.png" alt="Firefox"></a></p>
  
  <p>And this is how it looks in Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/KBrMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KBrMW.png" alt="enter image description here"></a></p>
  
  <p>So there is a ca. 30px high border before it reaches the bottom.</p>
  
  <p>The (S)CSS code for the footer doesn't look all too spectacular:</p>
  
  <pre><code>.main-footer {
    background-color: $gray-base;
    color: $white-base;
    font-family: "Avenir";
  }
  </code></pre>
  
  <p>I do give the footer an additional class, which adds a 170px high padding-top, which is there for an overlapping effect with another div. This code is not causing the 30px border, I already checked.</p>
  
  <p>I also tried to give <code>body</code>and <code>html</code> a 100% height. Furthermore, I tried changing the <code>position</code> of the footer to <code>absolute</code> (which itself destroys the footer even more, fixing that with a 100% <code>width</code>) and playing around with bottom values, but the footer seems to disappear entirely.</p>
  
  <p>I also just tried wrapping the footer in a <code>relative</code> positioned div, and positioning an inner div <code>absolute</code> and giving it a <code>bottom: 0;</code> value. Same result, footer not extending down entirely.</p>
  
  <p>Kind of at the end with my ideas here, been a long time. If you need more information, I'll provide happily!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Someone asked for a specific screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/GCOk6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GCOk6.png" alt="enter image description here"></a></p>
  
  <p>this is with <code>html { background-color: red; }</code> and <code>body { background-color: pink; }</code></p>
  
  <p>I did 2 additional screenshots which show the hover effects of the webtools. They don't hover over the red part, which seems interesting to me:</p>
  
  <p><a href="https://i.stack.imgur.com/jMLMN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jMLMN.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/z20TJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z20TJ.png" alt="enter image description here"></a></p>