3

我是 bootstrap 的新手，我正在设计一个管理面板，这里是 DEMO。

我想让侧边栏高度同样取决于正确的内容 div。.ie（侧边栏背景颜色为灰色）。

Html Markup ：（ 也想知道我的html结构是否正确）

   <!-- Headder row -->
    <div class="row">
       <div class="navbar"> .....  </div>
    </div>

 <!-- Content row -->
    <div class="row">
        <!-- SIDEBAR Open -->
        <div id="sidebar-left" class="col-2 col-lg-2">
            ....
       </div>
   <!-- right content box -->
     <div id="content-right" class="col-lg-10 container" >
      ......
    </div
   </div>


<!-- Footer row -->
    <div class="row">
      ......   
    </div>

预期输出： 在此处输入图像描述

4

5 回答 5

1

尝试这个

http://jsfiddle.net/BM65D/

body{
    margin:0;
    padding:0;
}
.header{
    background-color:#00A2E8;
    height:50px;
    position:fixed;
    top:0;
    width:100%;
}
.footer{
    background-color:gray;
    height:50px;
    position:fixed;
    bottom:0;
    width:100%;
}
.left{
    height:400px;
    background-color:#C3C3C3;
    width:200px;
    position:fixed;
    top:50px;  
}
.right{
    left:200px;
    width:100%;
    position:absolute;
}
于 2013-08-06T10:42:45.953 回答
1

你可以用display:table-cell财产做到这一点

我创建了一个 bootply 演示 => http://bootply.com/100790

脚步：

将另一个类添加到您的包装器中，例如 .mainwrap 和 CSS

.mainwrap {
 display:table;
}

将 CSS 添加到侧边栏左侧和内容右侧

.sidebar-left {
  display:table-cell;
  float:none;
}

.content-right {
 display:table-cell;
 float:none;
}

我已经从 content-right 中删除了 min-height，因为 table 无法使用它。也将浮动更改为无。因为你不再需要它。

工作演示：http ://bootply.com/100790

希望这可以帮助

于 2013-12-16T12:49:31.770 回答
0

尝试扭曲.container中的整个内容区域。在流体布局下的旧文档中看到了这一点

于 2013-09-12T14:59:41.480 回答
0

尝试这个：

class="col-lg-2 col-sm-1"
于 2013-09-12T14:01:37.307 回答
0

尝试获取正确的容器高度并将其分配给左侧导航栏，如下所示：

$(document).ready(function(){
    var s = $(".container").outerHeight(true); 
  s+= "px";
  //alert("height" + s);
  $("#sidebar-left").css("height", s);
  $("#sidebar-left").css("background-color", "grey");


});
于 2013-08-06T10:43:50.920 回答