<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="container"> <nav> </nav> <section id="container"> <aside id="sidebar"> <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> <li>Cuatro</li> </ul> </aside> <section id="main"> <h1>Contenido Principal</h1> </section> </section> </div>

nav{ height:50px; background-color:cyan; } #container{ border:1px solid blue; height:100%; } #sidebar{ background-color: lime; width:150px; display:block; height:100%; top:50px; position:fixed; } #main{ margin-left:155px; border:1px solid black; float:left; top:50px; width:100%; }