<table class="container">
  <tr class="header">
    <td>Here is the header!<br>What if there are more lines?<br>The header content may overflow!
   <br>Could you still see this line？</td>
  </tr>
  <tr>
    <td class="content-container">
      <div class="content">
        <div class="some-tall-content">Main body of the content.</div>
      </div>
        
      </td>

  </tr>
</table>

html, body{
    margin:0px;
    background:#000;
    width:100%;
    height:100%;
}
.container {
    width: 100%;
    height: 100%;
    margin:0px;
}
.header {
    height:50px;
    background:#2980b9;
    color: #ffffff;
    border:0;
    overflow: hidden;
}
.content-container {
  height:100%;
}

table {
  border-collapse: collapse;
}

td {
  vertical-align: top;
}
.content {
    background: #ffffff;
    border: 0;
    overflow-y: scroll;
    height:100%;
}

.some-tall-content {
   height: 2000px;
}