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

我通过使用绝对定位的div和一些jQuery来解决这个问题。我有一个固定高度为50px的Bootstrap导航栏，所以这就是你在代码中看到50的原因。如果您没有顶部导航栏，则可以将其删除。

此解决方案可以在任何高度动态工作。

CSS：

.sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

jQuery：

var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();

if (document_height > sidebar_height) {
    sidebar.css('height', document_height - 50);
}

关于这一点的巧妙之处是背景不会闪烁，因为它使用CSS来调整最小高度，因此通常会导致背景闪烁的jQuery大小调整将隐藏在页面加载上。

Answer 3

方法1：在换行div的末尾添加了带有style =“clear：both”的空div。 http://jsfiddle.net/34Fc5/1/

approch 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，身体改变高度：100％到.sidebar

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

Answer 4

唯一让它为我工作的东西（经过几个小时的尝试）是

HTML <nav class="col-sm-3 sidebar">

CSS padding-bottom: 100%;

填充百分比对我来说是这样的。现在它一直到页面底部。

bootstrap 3.0全身体侧边栏

4 个答案: