Question

我使用最新版本的bootstrap，我的siderbar太短而且不是全高您可以在此处查看：http://srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS：http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
这个问题来自我的CSS，还是来自bootstrap的问题？我该如何解决？

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>

Answer 1

自问这个问题以来，Bootstrap 4已经改变，但你可以使用min-height使侧边栏达到全高..

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

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

更新Bootstrap 4.1

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

https://www.codeply.com/go/fz2R7nUwue

Answer 2

更简单的方法是做类似的事情：

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

Answer 3

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

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

对于全长侧栏，应给出100％的值。对于半屏长度，给出50％的值等等。

这应该有所帮助。

Answer 4

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

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

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

v4 bootstrap全高侧边栏

4 个答案: