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

Question

[VeyDlin]

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;
}

Answer 1

[Сергей delphinpro]

min-height: calc(100vh - 100px);

Comments

[VeyDlin]

Да оно же нигде не поддерживается

[Сергей delphinpro]

ВэйДлин: вы только что из криогенной камеры? =)
caniuse.com/#search=calc

[VeyDlin]

Сергей: мой заказчик от туда

[Виолетта Морозова]

А почему -100px ? Ведь высота хидера 50px.
Можно еще и так написать height: calc(100% - 50px);

[Сергей delphinpro]

Виолетта Морозова: 100 - просто пример

[Виолетта Морозова]

Сергей: а, ок)

Answer 2

[gleendo]

https://jsfiddle.net/evg_/hvsL8rfk/

Comments

[VeyDlin]

В сафари происходит Сатана https://yadi.sk/i/_zYEjPVuuQXq6

[gleendo]

ВэйДлин: Какая версия сафари?

[VeyDlin]

evg_: последняя, под win

[gleendo]

ВэйДлин: Safari под windows больше не поддерживается. Да и доля тех кто сидит через Safari под windows , стремится к нулю. Так что не стоит брать в учет этот браузер под windows.

[zooks]

ВэйДлин: evg_: да, по WIndows сейчас очень древняя версия, примерно как IE8. Тестируйте Safari только на OSX и iOS.

Answer 3

[Максим]

calc (); работает везде : https://jsfiddle.net/Geyan/9z8u92dh/4/ , проверил с 4 устройств

Answer 4

[Евгений]

Можно сделать с помощью flex-box так:
https://jsfiddle.net/9z8u92dh/3/

Answer 5

[Виолетта Морозова]

Все гораздо проще. Если флексы не подходят из-за поддержки каких-нибудь старых браузеров, то вот так: https://jsfiddle.net/9z8u92dh/5/