title: Set div height equal to screen size
body: <p>I have a div element in twitter-bootstrap which will have content that will overflow vertically outside the screen.</p>
  
  <p>I would like the div to take the height of the size of the browser window and let the rest of the content scroll vertically within the window.</p>
  
  <p>I have a sample that is not working @<a href="http://jsfiddle.net/isherwood/ntLpg/201/" rel="noreferrer">jsFiddle</a></p>
  
  <pre><code>#content {
      border: 1px solid #000;
      overflow-y:auto;
      height:100%;
  }
  
  &lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span3"&gt;Side Bar&lt;/div&gt;
  
          &lt;div class="span9" id="content"&gt;
              Content Bar Example Content
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am posting this question after reading so questions like <a href="https://stackoverflow.com/questions/6675961/how-to-set-height-of-a-div-same-as-the-screen-height">SO Questions</a></p>
  
  <p><strong>EDIT--</strong></p>
  
  <p>Sorry guys I guess I got my question wrong.</p>
  
  <p>What I would like is that my div must fill the rest of the vertical space in the screen.</p>
  
  <p>It would be great if someone can suggest a responsive solution</p>