title: sticky footer for mobile
body: <p>Working on a website using Bootstrap 3 (<a href="http://www.patrickmanser.ch/fnws" rel="nofollow">http://www.patrickmanser.ch/fnws</a>) and I want do code a sticky footer. I applied the codes used in the Bootstrap 3 examples, adjusted them to my sizes. It works perfectly on a desktop monitor. If you switch to mobile sized screens, however, the footer overlaps the content. I'm guessing, it is because the size (height) of the footer changes aswell, as I'm using the grid system there. You can look at the source code (main.css), but I think the most important parts are these:</p>
  
  <pre><code>html {
      position: relative;
      min-height: 100%;
  }
  
  body {
      margin-bottom: 237px;
      overflow-y: scroll;
      background-color: #eee;
  }
  
  #page-footer {
      position: absolute;
      bottom: 0;
      min-height: 200px;
      background-color: #333;
      width: 100%;
      color: #999;
  }
  
  .copyright {
      background-color: #222;
      min-height: 50px;
      color: #666;
      width: 100%;
      text-align: center;
      line-height: 50px;
  }
  </code></pre>
  
  <p>I have no idea how to solve this, or if it even can be solved properly. Any hints are much appreciated!</p>