title: Fixed footer and content filler with boostrap
body: <p>I would like to put the footer at the bottom of the browser window and fill the empty part with the container when necessary(. This is my structure:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class='container'&gt;
          ....
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div id='wrap'&gt;
      &lt;div class='container'&gt;
          &lt;div class='white-background'&gt;
              &lt;div class='col-xs-12 col-sm-5 leftcontent'&gt;[%leftcontent%]&lt;/div&gt;
              &lt;div class='col-xs-12 col-sm-7 maincontent'&gt;[%maincontent%]&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;
      &lt;div class='container'&gt;
          &lt;div style='text-align: center; padding-bottom: 20px;'&gt;&lt;h3&gt;[%copyright%]&lt;/h3&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>And this is the css:</p>
  
  <pre><code>#wrap {
      min-height: 100%;
      background-image:url('bk.gif');
      background-color: #2c3e50;
  }
  
  .white-background{
      width:100%;
      height:100%;
      display:block;
      overflow:auto;
      background-color: #fff!important;
  }
  
  footer{
      background-color: #f2f2f2;
      text-align:center;
      position: relative;
      margin-top: -50px;
      height: 50px;
      clear:both;
      padding-top:20px;
  }
  </code></pre>
  
  <p>I have done some tries and took a look to other answers, but without success...</p>