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

随着右栏内容的增多，我希望侧边栏也跟着增长。

- black_rabbit

---

如果您能提供已经尝试过的代码，那肯定会有所帮助。 - Brian

你想让它的高度与什么一样高？是 body 还是窗口？ - Mr Lister

编辑了带有 Bootply 代码段的帖子。 - black_rabbit

我似乎找不到如何使用Bootply，我得到了403错误，但是如果你想让侧边栏与正文一样高，页面必须知道正文的高度。 - Mr Lister

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更改为相应的min-width（sm为768px，lg为1200px）。Bootstrap会处理其余部分。

- pjfamig

---

这不是一个有效的解决方案，如果侧边栏的高度大于窗口高度，它将无法滚动。 - Slim Fadi

@SlimFadi，在不改变上述任何内容的情况下，在你的 .sidebar CSS 下添加以下内容：overflow: scroll;这样就可以解决问题了！ - Alexandros Gouvatsos

Answer 2

我用一个绝对定位的div和一点jQuery解决了这个问题。我有一个高度为50像素的固定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调整大小在页面加载时将被隐藏。

- kjdion84

Answer 3

方法1：在wrap div的末尾添加样式为"clear:both"的空div。 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中添加"overflow: hidden;" 将html、body的高度从100%更改为 将.sidebar的高度从100%更改为

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

- Shadow_boi

---

这种方法不适用于右侧边栏。你怎么让它工作？ - Rick Scolaro

Answer 4

唯一让我成功（尝试了很多小时后）的是：

HTML <nav class="col-sm-3 sidebar"> CSS padding-bottom: 100%; 百分比的填充对我有用。现在它可以一直到页面底部。

- Yoko