Twitter Bootstrap2 100% 高度响应

Posted 2023-03-31

【中文标题】Twitter Bootstrap2 100% 高度响应

【英文标题】：Twitter Bootstrap2 100% height responsive

【发布时间】：2012-04-06 20:36:23

【问题描述】：

我想用 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/

【问题讨论】：

谢谢这很好用。点赞！

【参考方案1】：

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

【讨论】：

我用 jquery 版本更新了我的问题。如果您需要更多信息（html），请告诉我，我也会发布。

【参考方案2】：

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

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

希望这会有所帮助。

【讨论】：

谢谢，但我希望它没有页面滚动（这就是我的意思是 100% 高度），如 Gmaps。我画了一个更好的解释

【参考方案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% 高度。