Simplest and Cleanest bootstrap layout - html

Question

I have created a layout for my project but I can't seem to get it right.
In this picture you see that my page-wrapper don't stretch the 100% window height. It just wrap around what is inside.
I have also created a JSFiddle that you can check out. I can easily add min-height to my #page-wrapper but then on some screens a scroll will come up and on other screens the same problem occurs. min-hieght or height set to 100% doesn't work.
And then I also want the top-nav and side-bar remain fixed to the screen so that only the white area become scrollable. The image below show what I want to achieve in the end.
How can I fix this or what is the most efficient way to get this layout?
HTML:
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Purchase Module</a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
</li>
</ul>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</li>
<li>
<i class="fa fa-angle-double-right"></i> Dashboard
</li>
<li>
<i class="fa fa-angle-double-right"></i> Orders
</li>
<li>
<i class="fa fa-angle-double-right"></i> Vendors
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand" href="#">Vendors</span>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-plus-circle"></i> Add new</li>
</ul>
</div>
</nav>
<table id="index-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Contact Person</th>
<th>Phone Number</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tellus LLC</td>
<td>Nigel Chaney</td>
<td>070 8741 7876</td>
<td>nec.diam.Duis#felisNulla.com</td>
<td>
<div class="btn-group btn-group-xs" role="group">
<a class="btn btn-default" href="#" role="button">
<i class="fa fa-search-plus"></i> Show
</a>
<a class="btn btn-default" href="#" role="button">
<i class="fa fa-pencil-square-o"></i> Edit
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 15px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 15px;
border-left: 1px solid #e7e7e7;
}
}
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
DataTables:
$(document).ready(function() {
$('#index-table').DataTable();
});

Answer 1

To achieve the layout you're after in your second image you can do something like this:
HTML
<html>
<body>
<div class="page-content">Content</div>
<div class="side-bar">Sidebar</div>
<div class="site-header">Header</div>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.page-content {
height: 100%;
background: white;
padding: 80px 0 0 200px;
}
.site-header {
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100%;
background: yellow;
}
.side-bar {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 200px;
background: green;
padding: 80px 0 0 0;
}
Fiddle: https://jsfiddle.net/0s3k9kho/

Answer 2

html, body, #wrapper {
height: 100%;
}
#page-wrapper {
min-height: calc(100% - 51px)
}
This works for me.