html - v4 bootstrap full height sidebar -


i using latest version of bootstrap , siderbar short , not full height.
can view here: http://srv.sniperjum.com/sh1omi/bootstrap-dev/
css: http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
problem css or problem bootstrap? , how can 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 > {     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> 

the easier way that:

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

Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -