手机 – Twitter Bootstrap2 100％高度响应

这个想法是从maps.google.com构建一个这样的UI，但是使用带有bootstrap2的响应式设计。

我想要一个桌面风格

>顶部的navbar
> 1左列(作为侧栏)

> height：100％减去navbarHeight，带滚动条
> width：.span3

>填充屏幕其余部分的内容

然后，对于响应式移动设计，我希望具有完整高度的部分具有取决于内容的高度。

我做了一个草图来解释更好

编辑：想要做一些类似this但有反应的东西，只有北(navbar)，西(侧栏)和中心(内容)

EDIT2：我终于用jquery做了，但是我想要一个CSS解决方案。如果有人问，我会把解决方案作为答案。

EDIT3：好的，这里是我使用JQuery找到的解决方案(我觉得很简单)

$(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")
});

$(selector).css()函数和条件if可以用plain css替换，CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive的媒体查询

但问题是$(window).height()是运行时计算的。这应该被替换为像高度的东西：CSS中的100％，这可以做到这一点，但是找不到正确的地方放置100％的高度。

EDIT4：在这里我发现它可能是一个只有CSS的解决方案！如果我取得进展，我会发布答案！
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/