Two flex containers are utilized: one for the navigation bar and the other for the page content.
To make the content occupy the entire height of the page, the container's height was set to 100vh. However, a challenge arose when the navigation bar's height needed to be subtracted from the viewport.
/* Mixins Definitions */
/* Actual CSS */
.navbar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.81);
font-size: 14px;
-webkit-flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
list-style: none;
}
.navbar li {
margin: 0;
line-height: 3.2em;
display: block;
}
.navbar li i {
margin-right: 10px;
}
.navbar li a {
color: #9d9d9d;
text-decoration: none;
padding: 15px;
margin: 0;
}
.navbar li a:hover {
color: #FFFFFF;
}
.navbar li:first-child {
margin-right: auto;
}
.navbar li:first-child a {
font-size: 20px;
}
@media all {
}
@media all and (max-width: 600px) {
.navbar {
justify-content: space-around;
}
.navbar li:first-child {
display: none;
}
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
}
.container .sidebar {
width: 16.5%;
border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
padding: 0;
list-style: none;
}
.container .sidebar .navigation a {
padding: 10px 15px 10px 20px;
text-decoration: none;
display: inline-block;
color: #337ab7;
width: 100%;
}
.container .sidebar .navigation a:hover {
background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
background-color: #428bca;
color: #FFFFFF;
}
.container .content {
flex: 1;
height: 100%;
padding: 30px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #f8f8f8;
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<ul class="navbar">
<li><a href="#">Company</a></li>
<li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</a></li>
<li><a href="#">Dashboard</a></li>
</ul>
<div class="container">
<div class="sidebar">
<ul class="navigation">
<li><a href="/dashboard">Dashboard</a></li>
<li class="active"><a href="/hosts">Hosts <span class="sr-only">(current)</span></a></li>
<li><a href="/trusers">Users</a></li>
</ul>
</div>
<div class="content">Content</div>
</div>
</body>