Desktop layout

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="header">
  HEADER
</div>
<div class="navigation">
  NAVIGATION
</div>
<div class="content">
  <div class="page-header">
    <h1>
         PAGE TITLE
      </h1>
    <div>
      TOOLS
    </div>
  </div>
  <div class="scrollable-container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
         ...

CSS

.content {
  border: 1px solid #f00;
  top: 60px;
  position: fixed;
  z-index: 901;
  height: 100%;
  width: 100%;
}

.page-header {
  border: 1px solid #0f0;
  background: #0f0;
  margin-top: 0;
  margin-bottom: 0;
}

.scrollable-container {
  border: 1px solid #00f;
  overflow-y: auto;
  max-height: calc(100vh - 190px);
}

.header {
  border: 1px solid #0ff;
  background: #0ff;
  position: fixed;
  z-index: 901;
  height: 30px;
  width: 100%;
  top: 0;
}

.navigation {
  border: 1px solid #f0f;
  background: #f0f;
  position: fixed;
  z-index: 901;
  height: 30px;
  width: 100%;
  top: 30px;
}

.footer {
  border: 1px solid #ff0;
  background: #ff0;
  position: fixed;
  z-index: 901;
  height: 30px;
  width: 100%;
  bottom: 0;
}