Twitter Bootstrap2 100% 高度响应

Question

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

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

我想拥有一种桌面风格

• 顶部导航栏
• 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

根据我本周的调查（我正在尝试完成同样的事情），从纯 CSS 的角度来看，bootstrap 和 100% 高度的设计似乎是不兼容的（除非您想对 bootstrap 进行更改）。我很想看看你的 jquery 解决方案。

Answer 2

我不确定我是否完全理解您要查找的内容，但请查看http://reactivewebdesign.net/Chicago/Traffic，它有一个顶部菜单（添加引导导航栏应该很容易）。

左列跨越 3 列，地图占据 9 列。左侧菜单中还有一个名为“Where Am I”的链接，该链接也使用 Google 地图。地图的 CSS 位于页面顶部。如果您希望将地图压缩为三列，只需将 3 & 9 反转为 9 & 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% 高度。