Twitter Bootstrap2 100％高度响应

Question

我想用twitter的bootstrap v2做一个响应式布局，带有一个列和一个地图。

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

我希望有一个桌面风格

• navbar on top
• 1左列（作为侧边栏）
  • 高度：100％减去navbarHeight，带滚动条
  • 宽度：.span3
• 填充屏幕其余部分的内容

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

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

编辑：希望执行类似this的操作但响应迅速，只能使用北（导航栏），西（侧边栏）和中心（内容）

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可以替换为普通css和来自CSS3的媒体查询http://twitter.github.com/bootstrap/scaffolding.html#responsive

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

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

Answer 1

从我本周的调查（我正在努力完成同样的事情），看起来像bootstrap和100％高度的设计从纯CSS的角度来看是不兼容的（除非你想对bootstrap进行更改）。我有兴趣看到你的jquery解决方案。

Answer 2

我不确定我完全理解你在寻找什么，但是看看http://reactivewebdesign.net/Chicago/Traffic哪个有顶级菜单（添加bootstrap导航栏应该很简单）。

左列跨越3列，地图占据9列。左侧菜单中还有一个名为“Where Am I”的链接，该链接也使用Google地图。地图的css位于页面顶部。如果您想将地图分成三列，只需将3＆amp; 9至9＆amp; 3 - 它应该仍然有效。

希望这会有所帮助。

Answer 3

这是我使用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()是运行时计算的。应该用CSS中的height:100%之类的东西替换它，这可以解决问题，但我找不到放置100%高度的正确位置。