<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar sidebar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li> <a href="#">Profile</a></li> <li> <a href="#">Messages</a></li> <li> <a href="#">Home</a></li> <li> <a href="#">Profile</a></li> <li> <a href="#">Messages</a></li> </ul> </div> </div> </nav> <div class="main"> 123 </div>

body, html { height: 100%; } nav.sidebar.navbar { border-radius: 0px; } nav.sidebar, .main { transition: margin 200ms ease-out; } @media (min-width: 768px) { .main { position: absolute; width: calc(100% - 40px); /*keeps 100% minus nav size*/ margin-left: 40px; float: right; } /*Center Brand*/ nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px; } /*adds border top to first nav box */ nav.sidebar .navbar-nav > li:first-child{ border-top: 1px #e5e5e5 solid; } /*adds border to bottom nav boxes*/ nav.sidebar .navbar-nav > li{ border-bottom: 1px #e5e5e5 solid; } /*allows nav box to use 100% width*/ nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ padding: 0 0px 0 0px; } /*gives sidebar width/height*/ nav.sidebar{ width: 200px; height: 100%; margin-left: -160px; float: left; z-index: 8000; margin-bottom: 0px; } /*give sidebar 100% width;*/ nav.sidebar li { width: 100%; } } @media (min-width: 1230px) { .main { width: calc(100% - 200px); margin-left: 200px; } nav.sidebar { margin-left: 0px; float: left; } } section { padding-left: 15px; }

function htmlbodyHeightUpdate(){ var height3 = $( window ).height() var height1 = $('.nav').height()+50 height2 = $('.main').height() if(height2 > height3){ $('html').height(Math.max(height1,height3,height2)+10); $('body').height(Math.max(height1,height3,height2)+10); } else { $('html').height(Math.max(height1,height3,height2)); $('body').height(Math.max(height1,height3,height2)); } } $(document).ready(function () { htmlbodyHeightUpdate() $( window ).resize(function() { htmlbodyHeightUpdate() }); $( window ).scroll(function() { height2 = $('.main').height() htmlbodyHeightUpdate() }); });