Как сделать вертикальное позиционирование блоков

[alleclf]

Есть 3 блока размещенные вертикально в общем контейнере. Необходимо, что бы первые два были в самом верху, а третий в самом низу.

Проблема в том, что высота главного блока меняется (в шаблоне указана в % и зависит от размеров окна браузера).

Вот заготовка (я отступом отодвинул блок туда где он примерно должен быть) - https://jsfiddle.net/s306hnge/1/

Спасибо.

[BrusSENS]

Что у дочерних блоков с высотой?

[by chris]

@alleclf, https://www.w3.org/TR/css-flexbox-1/

[aqua.77]

2 часа назад, alleclf сказал:

главного блока меняется

Высота главного блока не меняется же, она задана фиксированной height:200px;

Ну или измени у нижнего блока позицию на самый низ другим способом

.end {
  width:100%;
  position:absolute;
  bottom:0;
  background-color:yellow;
}

А для главного блока допишите

.main {
position:relative;
  width:100%;
  height:200px;
  border:1px solid red;
}

Теперь нижний блок будет постоянно внизу при любых обстоятельствах.

[radioactive]

Если я правильно понял то вот

https://jsfiddle.net/9631d4qq/1/

осталось подпилить под media запрос 

Edited November 20, 2016 by radioactive