Twitter Bootstrap双列响应布局 - 侧栏100%高度,固定宽度

时间:2012-06-20 03:54:17

标签: css css3 twitter-bootstrap responsive-design

我正在尝试使用Bootstrap组合一个布局,它类似于响应的典型OS X UI。

必须执行以下操作:

  • 整体高度100%
  • 固定宽度(但响应性)100%高度侧边栏及其自身的背景颜色
  • 响应机构(右栏)

我发现this线程,它部分完成了这项工作。问题是侧杆不是100%高度,也不是全视图时的固定宽度,当“响应”时,右侧在底部留下白色背景,而不是填充。

我玩了很多东西,但似乎无法得到它。有人会有任何建议或知道如何做到这一点吗?

谢谢!

编辑:

只是澄清,因为我的问题不清楚。这将是一个固定的左侧菜单,右侧为“正体”,整体宽度为100%。

1 个答案:

答案 0 :(得分:2)

检查一下。

<div class="row">
    <div class="span3" style="position:fixed;background-color:#46a546;height:100%;top:0px;" id="leftmargin">
        position fixed navbar (out of .container)
    </div>
</div>
<div class="container">
  <div class="row">
      <div class="span9 offset3" style="background-color:#049cdb;">
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
      </div>
  </div>
</div>

还有一些jQuery

function sizing() {
    var windowwidth=$(window).width();
    var containerwidth=$('.container').width();
    if(windowwidth<1200) {
      var diff=windowwidth-containerwidth+40;
    }
    else {
      var diff=windowwidth-containerwidth+60; 
    }
    $('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);
    if(windowwidth<=767) {
      $('#leftmargin').css('margin-left', '0px');
      $('#leftmargin').css('position', 'relative');  
    }
    else {
      $('#leftmargin').css('position', 'fixed');        
        if(diff>0) {
            $('#leftmargin').css('margin-left', (diff/2) +'px');
        } else {
            $('#leftmargin').css('margin-left', '20px');
        }
    }
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/NzqfL/3/

受我之前发表的帖子https://stackoverflow.com/a/10972425/1416911

的启发