Mobile Twitter Bootstrap2 100%高度响应

我想用twitter的bootstrap v2做一个响应性的布局，包括一个专栏和一张地图

其想法是从maps.google.com构建一个类似的用户界面，但使用bootstrap2的响应性设计

我想有一个风格的桌面与

• 顶部导航栏
• 1左栏（作为侧栏）
  • 高度：100%减去导航栏高度，带有滚动条
  • 宽度：.span3
• 填充屏幕其余部分的内容

然后，对于反应灵敏的手机设计，我希望具有全高的部件具有高度，这取决于内容

我画了一个草图以便更好地解释

编辑：希望做一些类似但反应迅速的事情，并且只使用北（导航栏）、西（侧栏）和中（内容）

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

EDIT3:好的，下面是我使用JQuery找到的解决方案（我认为使用纯js很容易做到）

$（selector）.css（）

函数和条件

if

可以替换为普通css和来自CSS3的媒体查询

但问题是

$（window）.height（）

是在运行时计算的。这应该被CSS中的

height:100%

之类的东西所取代，这可以做到，但我找不到合适的位置来放置

100%

高度

EDIT4:在这里，我找到了一个CSS专用的解决方案！如果我有进步，我会发布答案！

---

我不确定我是否完全理解您在寻找什么，但请看一下哪个菜单有顶部菜单（添加引导导航栏应该很容易）

左列跨越3列，地图占据9列。左侧菜单中还有一个名为“”的链接，该链接也使用谷歌地图。地图的css位于页面顶部。如果您希望将地图压缩为三列，只需将3&9反转为9&3，它仍然可以工作

---

希望这有帮助

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

这是我使用jquery找到的解决方案（我认为使用纯js很容易做到）

$（selector）.css（）

函数和条件

if

可以替换为普通css和来自CSS3的媒体查询

---

但问题是

$（window）.height（）

是在运行时计算的。这可能应该被CSS中的

height:100%

之类的东西所取代，这可以做到这一点，但我找不到合适的位置来放置

100%

高度。

谢谢，但我希望它没有页面滚动（100%高度就是这个意思）。我打了个平局来解释betterI用jquery版本更新了我的问题。如果你需要更多的信息（html），请告诉我，我也会发布。谢谢，这很有用。向上投票！

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

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