title: Twitter Bootstrap2 100% height responsive
body: <p>I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.</p>
  
  <p>The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.</p>
  
  <p>I want to have a style for desktop with</p>
  
  <ul>
  <li>navbar on top</li>
  <li>1 left column (as sidebar)
  
  <ul>
  <li>height: 100% minus navbarHeight, with a scrollbar</li>
  <li>width: .span3</li>
  </ul></li>
  <li>content that fills the rest of the screen</li>
  </ul>
  
  <p>Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.</p>
  
  <p>I made a sketch to explain better
  <img src="https://i.stack.imgur.com/3qVZm.png" alt="sketch"></p>
  
  <p><strong>EDIT:</strong> Looking to do something like <a href="http://layout.jquery-dev.net/demos/example.html" rel="noreferrer">this</a> but responsive, and only with north (navbar), west (sidebar), and center (content)</p>
  
  <p><strong>EDIT2:</strong> I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.</p>
  
  <p><strong>EDIT3:</strong> Ok, here is the solution I found using JQuery (I think it's easy to do with plain js)</p>
  
  <pre><code>$(window).bind('resize', function() {
      if ( $(window).width() &gt; 980 ) {
          $("#content").height(($(window).height()-40)+"px")
          $("#sidebar").height(($(window).height()-58)+"px")
          $("body").css("padding-top","40px")
      }
      else {
          $("#content").height(($(window).height()-50)+"px")
          $("#sidebar").height(($(window).height()-68)+"px")
          $("body").css("padding-top","0px")            
      }
  
      $("#sidebar").css("overflow", "auto")
      $("body").css("padding-bottom","0px")
      $(".navbar").css("margin-bottom","0px")
  });
  </code></pre>
  
  <p>The <code>$(selector).css()</code> functions and the conditional <code>if</code> could be replaced with plain css and the media queries from CSS3 <a href="http://twitter.github.com/bootstrap/scaffolding.html#responsive" rel="noreferrer">http://twitter.github.com/bootstrap/scaffolding.html#responsive</a> </p>
  
  <p>But the problem is that <code>$(window).height()</code> is calculated runtime. That should be replaced maybe by something like a <code>height:100%</code> in CSS, and that could do the trick, but I couldn't find the right place to put that <code>100%</code> height.</p>
  
  <p><strong>EDIT4:</strong> Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer!
  <a href="http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/" rel="noreferrer">http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/</a></p>