7

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/
CSS: http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
This problem is from my CSS or is it a problem from the bootstrap? and how can I fix it?

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>
sh1omi
  • 71
  • 1
  • 1
  • 9
  • Put your code relevant to your question in the body of the question, rather than a link – Andy Holmes May 09 '16 at 10:34
  • There are many solutions for that - you can use table layout so the sidebar will be one of the table-row and content also, then you should set whole container minimal height to full page height (100vh). You can use flex layout here. Also one of the solution is to set the sidebar position to fixed (`left: 0` and `top: 0`). Then set it's height to 100%. – Kamil May 09 '16 at 10:51
  • @Kamil can you show me how to do it? – sh1omi May 09 '16 at 12:44
  • here's a plunkr of your question: https://plnkr.co/edit/r77y94 – roberto tomás Aug 24 '16 at 12:02

4 Answers4

10

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://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://codeply.com/go/fz2R7nUwue

Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    The updated codeply for BS 4.1 works perfectly. But to save you some trouble, don't forget that the body (or an outer div) has to be set: `` thats not obvious from the codeply. – Hafnernuss Dec 05 '20 at 17:57
  • In addition to setting min-height to 100vh. I also added the bootstrap class sticky-top to my sidebar div. Worked for me and avoids the issue above with the main content extending beyond the sidebar – Squibly Jun 02 '21 at 02:58
  • which is not part of the OP question @squibly .. thanks for the downvote ;-) – Carol Skelly Jun 02 '21 at 11:26
1

The easier way is to do something like that:

.sidebar {
    height: calc(100vh - 54px); /* 54 pixel is the height of your .navbar */
}
Giacomo Torricelli
  • 764
  • 1
  • 6
  • 21
  • 5
    I think this is not so good idea, if content section will be higher sidebar will be lower than whole page – Kamil May 09 '16 at 10:48
  • I just tried this css and as @Kamil said the sidebar is short when the content section is longer. – sh1omi May 09 '16 at 12:17
-1

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;
Varma
  • 75
  • 1
  • 12
-1
.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.

Uswer721
  • 565
  • 1
  • 7
  • 13