Как сделать блоки одинаковой высоты на всю площадь вьюпорта?

Question

[nvanyuk09]

Цветные блоки должны занимать всю площадь окна, т.е. viewport’a. Какую им задать высоту?







.blue {
background-color: blue;
width: 50%;
float: right;
}

.orange {
background-color: orange;
float: left;
width: 33.333%;
}

.red {
background-color: red;
float: left;
width: 33.333%;
}

.violet {
background-color: darkmagenta;
float: left;
width: 33.333%;
}

.clear {
clear: both;
}

footer {
clear: both;
background-color: cyan;
}

Answer 1

[Ankhena]

Вся высота вьюпорта это 100vh
Родителю задать высоту 100vh и display: flex.

https://jsfiddle.net/0t8gbn5u/

p.s. float для верстки перестали использовать уже очень давно.