title: Make container div fills all layout with sticky footer
body: <p>I creating an new layout for a personal website.</p>
  
  <p>I'm using <em>Twitter Bootstrap 3</em>, and my initial layout was made using as exemple
  the "Bootstrap with sticky footer" sample (<a href="http://getbootstrap.com/examples/sticky-footer-navbar/" rel="noreferrer">http://getbootstrap.com/examples/sticky-footer-navbar/</a>)</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;!-- Wrap all page content here --&gt;
      &lt;div id="wrap"&gt;
          &lt;!-- Begin page navigation --&gt;
          &lt;nav id="nav-container" class="navbar navbar-default container" role="navigation"&gt;
              &lt;div class="container"&gt;
                  &lt;!-- Here I put a very normal Bootstrap 3 navbar --&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;!-- Begin page content --&gt;
          &lt;div id="main-container" class="container"&gt;
              &lt;!-- All my content goes here! --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Begin page footer --&gt;
      &lt;footer id="footer" class="container"&gt;
          &lt;div class="container"&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The Sticky Footer CSS:</p>
  
  <pre><code>html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }
  
  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto;
    /* Negative indent footer by its height */
    margin: 0 auto -100px;
    /* Pad bottom by footer height */
    padding: 0 0 100px;
  }
  
  /* Set the fixed height of the footer here */
  #footer {
    height: 100px;
  }
  </code></pre>
  
  <p>And the custom style for my layout:</p>
  
  <pre><code>body {
      /* Body's background will be grey */
      background-color: #C0C0C0;
  }
  #main-container {
      /* A box where I'll put the content will be white */
      background-color: #FFFFFF;
  }
  #wrap {
      height: 100%;
      min-height: 100%;
  }
  #main-container {
      min-height: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>This code generate this layout:</p>
  
  <p><img src="https://i.stack.imgur.com/F1Nvk.jpg" alt="LayoutNow"></p>
  
  <p>But, as you can see, the <code>div #main-container</code> don't grow 'till the end of the layout.
  The <code>div</code> keep with the height of his content.</p>
  
  <p>What I want is that this div always fills the entire page, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/C0RNP.jpg" alt="LayoutThen"></p>
  
  <p>Many solutions on internet said me to fix <code>min-height</code> to some tested value, but this way
  I'll not be able to keep my website responsive (it's very important to me keep my layout
  always responsive, that's the main reason I use Bootstrap 3).</p>
  
  <p>Other solution goes to calculate the div height with javascript. Personally I don't like
  this solution. I whish I could solve this only by using CSS.</p>
  
  <p>Someone knows how to solve this problem?</p>