v4 bootstrap 全高侧边栏答案

【问题标题】：v4 bootstrap full height sidebarv4 bootstrap 全高侧边栏
【发布时间】：2016-09-03 22:57:06
【问题描述】：

我使用的是最新版本的 bootstrap，但我的侧边栏太短且不是全高。
您可以从这里查看：http://srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS：http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
这个问题来自我的 CSS 还是来自引导程序的问题？我该如何解决？

CSS

li.active{
    background-color: #428bca;
}
li {
    padding-bottom: 5px;
    padding-top: 5px;
}
.sidebar{
    background-color: #f5f5f5;
    padding-right: 20px;
    padding-top: 20px;
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}
button{
    color: #fafafa
}

HTML

<nav class="navbar navbar-dark navbar-full bg-inverse">
    <button type="button" class="navbar-toggler" onclick="ToogleNavbar()">&#9776;</button>
</nav>
<div class="container-fluid">
    <div class="row" >
        <div class="col-sm-3 col-md-2 sidebar" id="Navbar">
            <ul class="nav nav-sidebar">
                <li class='active'><a href="/">Home</a></li>
                <li><a href="../notes">Notes</a></li>
                <li><a href="../chat">Chat</a></li>
                <li><a href="../rss">RSS</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">\</div>
    </div>
</div>

【问题讨论】：

将与您的问题相关的代码放在问题正文中，而不是链接中
有很多解决方案 - 您可以使用表格布局，因此侧边栏也将成为表格行和内容之一，然后您应该将整个容器的最小高度设置为整页高度 (100vh) .您可以在此处使用 flex 布局。解决方案之一是将侧边栏位置设置为固定（left: 0 和top: 0）。然后将其高度设置为 100%。
@Kamil 你能告诉我怎么做吗？
这里有一个问题：plnkr.co/edit/r77y94

标签： html css twitter-bootstrap twitter-bootstrap-4

【解决方案1】：

更简单的方法是这样做：

.sidebar {
    height: calc(100vh - 54px); /* 54 pixel is the height of your .navbar */
}

【讨论】：

我认为这不是一个好主意，如果内容部分会更高，侧边栏会低于整个页面
我刚试过这个css，正如@Kamil所说，当内容部分较长时，侧边栏很短。

【解决方案2】：

你可以试试这个而不是你的

删除这两个引导列
<div class="col-sm-3 col-md-2 sidebar" id="Navbar"> 如果你使用这个 cols 属性的位置将是相对的，我认为最好删除这些 cols 并使用这个 css。

  width: 210px;
  height: 100%;
  position: fixed;

【讨论】：

【解决方案3】：

.sidebar{ 
 position: absolute; 
 width: 250px; 
 height: 100%; }

height属性用于设置侧边栏的高度。

对于全长侧边栏，将给出 100% 的值。对于半屏长度，给出 50% 的值以此类推。

这应该会有所帮助。

【讨论】：

@sh1omi 你用过<!DOCTYPE html> 吗？如果是，请删除它并尝试。

【解决方案4】：

自提出此问题以来，Bootstrap 4 发生了变化，但您可以使用 min-height.. 将侧边栏设置为全高。

.sidebar{
    background-color: #f5f5f5;
    padding-right: 20px;
    padding-top: 20px;
    min-height: calc(100vh - 50px);
}

http://codeply.com/go/oiByWVrIbe（Bootstrap 4 alpha 6）

更新 Bootstrap 4.1

Flexbox 可用于允许容器及其子 div（行、列和侧边栏）填充高度...

https://codeply.com/go/fz2R7nUwue

【讨论】：

BS 4.1 的更新代码完美运行。但是为了省点麻烦，不要忘记必须设置 body（或外部 div）：<body class="d-flex flex-column h-100"> 这在 codeply 中并不明显。
除了将 min-height 设置为 100vh。我还在我的侧边栏 div 中添加了 bootstrap 类sticky-top。为我工作并避免了上述问题，主要内容超出了侧边栏
这不是 OP 问题的一部分@squibly .. 感谢您的反对 ;-)