Responsive design bootstrap 3.0全长车身侧边栏

我想让引导式跳水达到全身长度

这就是我迄今为止所尝试的：

html，正文{
最低高度：100%
}
.包裹{
身高：100%
}
.侧边栏{
背景色：#eee；
背景重复：重复；
填充：0；
最小高度：100%！重要；
位置：相对位置；
}
.侧边栏.侧边栏内容{
身高：100%；
宽度：100%；
填充物：5px；
保证金：0；
位置：相对位置；
}

---

随着右栏变长，我希望侧边栏也这样做

方法1：在换行div的末尾添加了带有style=“clear:tware”的空div。

方法2：

将“溢出：隐藏”添加到.wrap 更改高度：100%为html，正文 更改高度：100%为。侧边栏

---

使用css方式，侧边栏的高度将仅与浏览器的视图端口匹配。所以，如果您查看方法1，当您滚动时，您将注意到背景停止在视口。要修复它，需要js。

关键是要理解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>

工作解决方案：

---

如果使用“col-sm-x”或“col-lg-x”，只需将@media CSS更改为相应的最小宽度（sm为768px，lg为1200px）。Bootstrap处理其余的事情。

唯一让它对我起作用的事情（在尝试了很多小时之后）是

HTML

CSS

填充底部：100%

用百分比表示的填充为我做了这件事。现在它一直到页面底部。
我通过使用绝对定位的div和一点jQuery解决了这个问题。我有一个引导导航条，固定高度为50px，这就是为什么你在代码中看到了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大小调整将在页面加载时隐藏。
如果包含显示已尝试内容的代码，肯定会有所帮助。您希望它是什么的完整高度？
正文
或窗口？使用bootply代码段编辑了文章。我似乎无法找到如何使用bootply，我收到403个错误，但如果您想使边栏与正文一样高，页面必须知道正文有多高。此方法不适用于右侧边栏。这不是一个有效的解决方案，如果侧边栏的高度大于窗口的高度，则不会scroll@SlimFadi在不更改上述内容的情况下，在.sidebar CSS下添加以下内容：溢出：滚动；那就应该成功了！
.sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

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

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