Twitter Bootstrap2 100% height responsive

Question

I want to make a responsive layout with twitter\'s bootstrap v2, with a column and a map.

The idea is to build a UI like that from maps.google.com, but using a respo

Answer 1

here is the solution I found using JQuery (I think it's easy to do with plain js)

$(window).bind('resize', function() {
    if ( $(window).width() > 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")
});

The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.