Макет с эмулированием одинаковой высоты колонок, прижатым футером и колонками на всю высоту экрана — реально ли сверстать?

Question

[#FFFFFF]

Макет выглядит так:

Как прижать футер - понятно. Одинаковую высоту колонок сделать - тоже понятно.
ВОПРОС: реально ли сделать так, чтобы высота колонок подстраивалась под высоту экрана?
Муторно приводить свой код, хотелось бы просто выяснить, реально ли это, и может, получить какую-то наводку.

Answer 1

[Кирилл]

Flexbox

Comments

[#FFFFFF]

Как быть с IE 9, или каким там, который не поддерживает флексбокс?

[Кирилл]

Виктория: stackoverflow.com/questions/24371408/flexbox-alter...
Так 2 способа советуют:
1. Использовать полифилл flexiejs.com
2. С помощью https://modernizr.com/ определять устройство не поддерживающее flexbox и писать альтернативные стили (table-cell)

[#FFFFFF]

Попробовала сделать с помощью флекс бокс, но блоки всё равно не растягиваются по всему свободному пространству до футера, может подскажите, какой свойство использовать? Я задала контейнеру след. свойства: display: flex;
flex-direction: row-reverse; <-- т.к. левый сайдбар у меня идет после основного контента;
justify-content: space-between;
align-items: stretch;

Answer 2

[Ivanq]

Да, очень даже реально. Можно прописать в CSS:

height: calc(100vh - 200px - 300px);
/* height: calc(100vh - высота header'а - высота footer'а) */

либо

height: 75vh;
/* для header: */
height: 10vh;
/* для footer: */
height: 15vh;

Comments

[#FFFFFF]

Спасибо, Ваше решение интересное. Я, правда, прописала min-height, т.к. контент может быть и больше, чем высота экрана.

[#FFFFFF]

Только, min-height не работает в IE... так что вопрос открыт