Twitter Bootstrap2 100%高度响应

Question

我想用twitter的bootstrap v2制作一个响应式布局,包括一个列和一个地图.

我们的想法是使用maps.google.com构建类似的UI,但使用带有bootstrap2的响应式设计.

我希望有一个桌面风格

• 导航栏在上面
• 1个左栏(作为侧栏)
  • 高度:100%减去navbarHeight,带滚动条
  • 宽度:.span3
• 填充屏幕其余部分的内容

然后,对于响应式移动设计,我希望具有全高度的部件具有取决于内容的高度.

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

编辑:希望做像这样,但反应灵敏,只有北(导航栏),西(边栏)和中央(内容)

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

EDIT3:好的,这是我使用JQuery找到的解决方案(我认为使用普通的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")
});

的$(selector).css()功能和条件if,以及CSS3可以用纯CSS来取代媒体查询http://twitter.github.com/bootstrap/scaffolding.html#responsive

但问题$(window).height()是计算运行时间.应该用height:100%CSS中的东西代替它,这可以解决问题,但我找不到合适的位置来放置那个100%高度.

编辑4:在这里,我发现它可以是一个只有CSS的解决方案!如果我取得进步,我会发布答案! http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Answer 1

这是我使用 JQuery 找到的解决方案（我认为使用纯 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")
});

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

但问题是$(window).height()计算运行时间。也许应该用height:100%CSS 中的 a 之类的东西来代替，这可以解决问题，但我找不到放置该100%高度的正确位置。