Как сделать, чтобы высота одного DIV-a была равна 100% минус высота другого DIV?

Question

[DestroyerZzz]

Как сделать, чтобы высота синего DIV-a была равна 100% минус высота оранжевого DIV?

Comments

[Lynn «Кофеман»]

Без каких-то дополнительных ограничений можно сходу придумать три способа: flexbox, calc и position: absolute

Answer 1

[Виталий Инчин ☢]

Используйте calc
height: calc(100% - 75px);

Comments

[DestroyerZzz]

Спасибо. Только надо пробелы между операндами)

[Максим Тимофеев]

А как же поддержка старых браузеров? calc далеко не везде работает

[DestroyerZzz]

Максим Тимофеев: плевать на поддержку. у меня работает главное и всё xD

[Виталий Инчин ☢]

Максим Тимофеев: Почти везде. Собственно, есть варианты лучше?

[Максим Тимофеев]

Виталий Инчин: Описал. Через абсолютное позиционирование

[Максим Тимофеев]

DestroyerZzz: Вот мне бы таких заказчиков

Answer 2

[Максим Тимофеев]

Родителю 100% высоту и релятивное позиционирование
первому блоку дочке - 75px
второму - абсолютное позиционирование top:75px bottom:0
думаю идея понятна

Answer 3

[Александр Таратин]

https://jsfiddle.net/QW01_01/p18gtaz6/