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.

我想要一种桌面风格

• 顶部导航栏
• 1 个左列(作为侧边栏)
  • 高度:100% 减去导航栏高度，带滚动条
  • 宽度:.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

  希望做一些类似这个 但响应迅速，并且只有北(导航栏)、西(侧边栏)和中心(内容)

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

  我终于用 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.

  好的，这是我使用 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#responsive

  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#responsive

  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屋！