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()">☰</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
Post a Comment