Как растянуть контент по высоте?

https://jsfiddle.net/9z8u92dh/
Как можно растянуть aside и main по высоте экрана?
Проблема в том, что над контентом есть шапка и она мешает нормальной работе height: 100%

<header></header>
<div class="middle">
    <aside>Блоки</aside>
    <main>Контент</main>
 </div>

html, body {
	height: 100%;
  margin: 0;
}

header {
  background-color: #000;
  height: 50px;
}

.middle {
  background-color: #fff;
  width: 500px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* overflow: hidden нужен, по этому нельзя ставить display: table */
}

aside {
  background-color: #ff00ff;
  width: 100px;
   display: table-cell;
   vertical-align: top;
}

main {
  background-color: #00ffff;
  width: 400px;
   display: table-cell;
   vertical-align: top;
}