<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper" style="height: auto; min-height: 100%;"> <header class="main-header"> xyz xyz xyz xyz xyz </header> <aside class="main-sidebar"> the content start from here </aside> <div class="content-wrapper" style="min-height: 960px;"> this is content side of another </div> </div>

.wrapper { height: 100%; position: relative; overflow-x: hidden; overflow-y: auto; } .main-header { position: relative; max-height: 100px; z-index: 1030; } .main-sidebar { position: absolute; top: auto; left: 0; min-height: 100%; width: 230px; z-index: 810; transition: transform .3s ease-in-out,width .3s ease-in-out; } .content-wrapper { min-height: 100%; background-color: #ecf0f5; z-index: 800; } .content-wrapper, .main-footer { -webkit-transition: -webkit-transform .3s ease-in-out,margin .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out,margin .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out,margin .3s ease-in-out; transition: transform .3s ease-in-out,margin .3s ease-in-out; margin-left: 230px; z-index: 820; }