title: Responsive footer always in bottom
body: <p>I'm having trouble by creating a responsive footer that always stay on the bottom of the page. The code I'm actually using is this:</p>
  
  <pre><code>body
  {
      margin: 0 0 200px; //Same height of the footer
  }
  footer
  {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 200px;
      width: 100%;
      overflow: auto;
      background-color: rgba(67, 191, 115, 0.95);
  }
  </code></pre>
  
  <p>I use:</p>
  
  <pre><code>&lt;div class='main-content'&gt;
  //Content
  &lt;/div&gt;
  &lt;footer&gt;
  //Footer content
  &lt;/footer&gt;
  </code></pre>
  
  <p>Well, the problem is if I resize the screen and the content is larger than the resolution the footer lets a white space, like this:
  <img src="https://i.stack.imgur.com/dgUUV.jpg" alt="enter image description here"></p>
  
  <p>I am trying to solve this problem. If I use <code>position: fixed</code> the problem disappears, but I don't want the footer following the scroll. I think the problem is in the 100 percent width. The footer of this site, Stack Overflow, works as I need. If I resize the window the footer remains the same, no white space. How to achieve this? How to make the footer cover all the width without let white space even if the resolution is lower than the page like occurs here, in Stack Overflow?</p>