Twitter Bootstrap2 100％高度响应 [英] Twitter Bootstrap2 100% height responsive

问题描述

我想使用twitter的bootstrap v2进行响应式布局，并带有一列和一个地图.

I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.

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

The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.

我想为台式机设计一个风格

I want to have a style for desktop with

• 顶部的导航栏
• 左1列(作为边栏)
  • 高度:100％减去navbarHeight，带有滚动条
  • 宽度:.span3
  • navbar on top
  • 1 left column (as sidebar)
    • height: 100% minus navbarHeight, with a scrollbar
    • width: .span3

    然后对于响应式移动设计，我希望具有完整高度的零件的高度取决于内容.

    Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.

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

    I made a sketch to explain better

    编辑:希望做类似此但反应灵敏，并且仅在北(Navbar)，西(sidebar)和中(内容)

    Looking to do something like this but responsive, and only with north (navbar), west (sidebar), and center (content)

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

    I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.

    EDIT3 :好的，这是我使用JQuery找到的解决方案(我认为使用普通js很容易做到)

    Ok, here is the solution I found using JQuery (I think it's easy to do with plain 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#响应

    The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

    但是问题在于$(window).height()是在运行时计算得出的.应该用CSS中的height:100%代替它，并且可以解决问题，但是我找不到合适的位置放置100%高度.

    But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.

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

    Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer! http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

    推荐答案

    这是我使用JQuery找到的解决方案(我认为使用普通js很容易做到)

    here is the solution I found using JQuery (I think it's easy to do with plain 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#响应

    The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

    但是问题在于$(window).height()是在运行时计算得出的.应该用CSS中的height:100%代替它，并且可以解决问题，但是我找不到合适的位置放置100%高度.

    But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.

    这篇关于Twitter Bootstrap2 100％高度响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！