I using the latest version of bootstrap and my siderbar is too short and not full height.
You can view it from here: http://srv.sniperjum.com/sh1omi/bootstrap-dev/
C
Bootstrap 4 has changed since this question was asked, but you can make the sidebar full height using 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)
Update Bootstrap 4.1
Flexbox can be used to allow the container and its child divs (row, col and sidebar) to fill height...
https://www.codeply.com/go/fz2R7nUwue
Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?
.sidebar{
position: absolute;
width: 250px;
height: 100%; }
The height attribute is used to set the height of the sidebar.
For a full length side-bar a value of 100% is to be given. For a half screen length a value of 50% is given So on and so forth.
This should help.
You can try this instead of yours
remove these two bootstrap cols
<div class="col-sm-3 col-md-2 sidebar" id="Navbar">
If you use this cols the position of the property will be relative i think it's better to remove those cols and use this css.
width: 210px;
height: 100%;
position: fixed;
The easier way is to do something like that:
.sidebar {
height: calc(100vh - 54px); /* 54 pixel is the height of your .navbar */
}