Question

我是bootstrap的新手，我正在设计一个管理面板，继承人 DEMO 。

我想让侧边栏高度等于正确的内容div。 .i.e（侧栏背景颜色为灰色）。

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>

预期输出 enter image description here

Answer 1

您可以使用display:table-cell属性

执行此操作

我创建了一个bootply demo =＆gt; http://bootply.com/100790

步骤：

在包装器中添加另一个类，如.mainwrap和CSS

.mainwrap {
 display:table;
}

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

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

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

我已从内容权限中删除了min-height，因为表格无法使用。也将float改为none。因为你不再需要它。

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

希望这有帮助

Answer 2

试试这个

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;
}

Answer 3

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

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


});

Answer 4

试试这个：

class="col-lg-2 col-sm-1"

Answer 5

尝试在 .container 中扭曲整个内容区域。在Fluid layout

下的旧文档中看到了这一点

Bootstrap 3-固定侧边栏布局问题

5 个答案: