JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="page-wrap">
<div class="container">
<div class="page-sidebar">
<ul>
<li><a href="#">there'll be navigation</a></li>
</ul>
</div>
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus non?</p>
</div>
</div>
</div>
CSS
ul {
margin: 0 !important;
}
html, body {
height: 100%;
}
.navbar {
margin: 0;
}
.page-wrap {
height: 100%;
}
.page-wrap > .container {
display: table;
table-layout: fixed;
height: 100%;
}
.page-sidebar {
display: table-cell;
vertical-align: top;
width: 200px;
height: 100%;
background-color: #ececec;
}
.page-sidebar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.page-content {
display: table-cell;
vertical-align: top;
width: 100%;
height: 100%;
}