bootstrap 3.0全身体侧边栏

Question

我试图让bootstrap div成为全身长.

这是我到目前为止所尝试的:http: //jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

随着右栏的长度增长,我希望侧栏也能做同样的事情.

Answer 1

关键是要了解Bootstrap 3提供的"col-md-x"和"col-md-offset-x"样式:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

然后使用CSS确保断点排队.您需要根据您的特定需求微调填充/边距,但偏移和@media断点可以很好地处理整体布局:

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

工作解决方案:http://www.bootply.com/111837

如果使用"col-sm-x"或"col-lg-x",只需将@media CSS更改为相应的最小宽度(sm为768px,lg为1200px).Bootstrap处理剩下的事情.

Answer 2

方法1：在wrap div末尾添加空div，样式为“clear:both”。 http://jsfiddle.net/34Fc5/1/

方法2： http: //jsfiddle.net/34Fc5/：

html, body {
    height: 100%;
}
.wrap {
    height: 100%;
    overflow: hidden;
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    height:100% !important;
    position:relative;

}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

添加了“溢出：隐藏；” .wrap 更改高度：100% 至 html，body 更改高度：100% 至 .sidebar

使用css方式，侧边栏的高度将只匹配浏览器的视口。因此，如果您查看方法 1，当您滚动时，您会注意到背景停在视口处。需要js来修复它。