title: Bootstrap responsive navbar and padding to container-fluid
body: <p>See the following fiddle: <a href="http://jsfiddle.net/HXzPj/6/" rel="nofollow">http://jsfiddle.net/HXzPj/6/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /&gt;
          &lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="navbar" style="position:absolute; top:0; width:100%;"&gt;
              &lt;div class="navbar-inner"&gt; &lt;a href="#" class="brand"&gt;KB&lt;/a&gt;
  
                  &lt;ul class="nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Create page&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="nav pull-right"&gt;
                      &lt;li&gt;
                          &lt;p class="navbar-text"&gt;user@email.com&lt;/p&gt;
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Upload&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Manage&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Password&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sign Out&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row-fluid columns"&gt;
                  &lt;div class="span2 article-tree"&gt;Article-tree&lt;/div&gt;
                  &lt;div class="span10 content-area"&gt;Content-area&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="footer"&gt;footer&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code> html, body {
      height: 100%;
  }
  .container-fluid {
      margin: 0 auto;
      height: 100%;
      padding-top: 62px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .columns {
      background-color: #C9E6FF;
      height: 100%;
  }
  .content-area, .article-tree {
      background: #bada55;
      height: 100%;
  }
  .footer {
      background: red;
      height: 20px;
  }
  </code></pre>
  
  <p>Everything works fine when the screen width is wide enough to show all elements of the navbar. When the width is reduced, then the navbar stacks nicely but the article-tree and content-area stay in their fixed position, so are partly hidden behind the navbar. </p>
  
  <p>How can I get it so that the content gets pushed below the navbar when it's stacking? Do I have to use <code>@media</code> for this?</p>