title: Footer fixed bottom with header and Bootstrap
body: <p>I'm using Twitter Bootstrap 3.3.1, with the template "Jumbotron".</p>
  
  <p>Here, my page :</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
          &lt;!-- content --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;
          &lt;!-- content --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="root" class="container"&gt;
      &lt;div id="main" class="row"&gt;
          &lt;section id="content"&gt;
              &lt;!-- content --&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;!-- content --&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>On the browser, the header (the div with role "navigation" + div with class "jumbotron") has  a 290px size. </p>
  
  <p>When I'm trying to push the footer at the bottom with all what I found, I have always the same problem. The "root" and "main" div will always be longer than the screen display because of the header, I guess.
  A lot of internet's solutions don't include a header... :(</p>
  
  <p>I don't want to fix the footer with a "position:fixed", I realy want to push it at the bottom with CSS only.</p>
  
  <p>To be more specific, my footer has to stay at the bottom of the page with or without content. If the content is sorter than the screen, the footer will be at the bottom of the screen. If the content is longer than the screen, the footer will be at the end of the page.</p>
  
  <p><strong>EDIT: I don't want to do it WITH Bootstrap. I just want some CSS to do it without Bootstrap if Bootstrap can't do it !</strong></p>
  
  <p>I hope it's clear enough.</p>
  
  <p>If someone has an idea, it'll make my day!</p>
  
  <p>Thanks.</p>