title: Twitter Bootstrap - 100% Height
body: <p>I'm trying to design an Admin panel for my application using twitter-bootstrap framework but i cannot get my layout to work.</p>
  
  <p>I was inspired by this design: <img src="https://i.stack.imgur.com/O4f2c.png" alt="enter image description here"><br>
  It would be a two column layout "Sidebar" and "Main content" but I can't get the 100% height to work. I managed to get 2 column layout with 100% width using this code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
   &lt;div class="row-fluid"&gt;
  
  
     &lt;div class="span2 colorize-white"&gt;
       &lt;!--Sidebar content--&gt;Sidebar
     &lt;/div&gt;
  
  
     &lt;div class="span10 colorize-white"&gt;
       &lt;!--Body content--&gt;Main
     &lt;/div&gt;
  
  
   &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS  </p>
  
  <pre><code>/* Global */
  html, body {
      color: #6B787F;
      padding: 0;
      height: 100%;
      background: #11161a;
      font-family: 'PT Sans' !important;
  }
  
  .colorize-white {
      background: #FFFFFF;
  }
  
  .no-margin {
      margin: 0;
  }
  </code></pre>
  
  <p>I'm half way there but there are two things I can't solve.<br>
    1)  100% Height<br>
    2)  Getting rid of outer margins on second image  </p>
  
  <p><img src="https://i.stack.imgur.com/qdQqd.jpg" alt="enter image description here">
  You can see that I have margin between browser border and Sidebar/Main elements and then margin between the two. I need to get rid of this if I add no-margin to all my elements in HTML i pasted including body tag i still don't get 100% height and i still cant get rid of margins between browser border and sidebar and main content while the margin space between Sidebar and Main content disappears.  </p>