Как задать блокам одинаковую высоту?

Question

body {
  margin: 0;
  height: 100%;
}

header {
  background-color: yellow;
}

.green {
  background-color: green;
  width: 50%;
  float: left;
}

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

<body>
  <header>0</header>
  <div class="green">1</div>
  <div class="blue">2</div>
  <div class="orange">3</div>
  <div class="violet">4</div>
  <div class="red">5</div>
  <footer>5+1</footer>

Answer 1

Блокам не задана высота. Надо либо вписать в каждый блок текст, либо задать высоту блокам

.green{
    background-color:green; 
    width:50%;
    float:left;
    height: 5em;
}
.blue{
    background-color:blue;
    width:50%;
    float:right;
    height: 5em;
}
.orange{
    background-color:orange;
    float:left;
    width:33.333%;
    height: 5em;
}
.red{
    background-color:red;
    float:left;
    width:33.333%;
    height: 5em;
} 
.violet{
   background-color:darkmagenta;
   float:left;
   width:33.333%;
   height: 5em;
}
footer{
    clear:both;
    background-color:cyan;
    height: 5em;
}

<header></header>
<div class="green"></div>
<div class="blue"></div>
<div class="orange"></div>
<div class="violet"></div>
<div class="red"></div> 
<footer></footer>

Answer 2

так?

*,*:before,*:after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

.green{
    position: absolute;
    height: 33.333%;
    background-color:green; 
    width: 50%;
    top: 0;
}
.blue{
    background-color:blue;
    width: 50%;
    top: 0;
    right: 0;
    position: absolute;
    height: 33.333%;
}
.orange{
    background-color:orange;
    top: 33.333%;
    width: 33.333%;
    position: absolute;
    height: 33.333%;
}
.red{
    background-color:red;
    top: 33.333%;
    left: 33.333%;
    width: 33.333%;
    position: absolute;
    height: 33.333%;
} 
.violet{
    background-color:darkmagenta;
    top: 33.333%;
    right: 0;
    width: 33.333%;
    position: absolute;
    height: 33.333%;
}
footer{
    top: 66.666%;
    background-color:cyan;
    position: absolute;
    height: 33.333%;
    width: 100%;
}

<header></header>
<div class="green"></div>
<div class="blue"></div>
<div class="orange"></div>
<div class="violet"></div>
<div class="red"></div> 
<footer></footer>

БЛОГ НА HUSL

Как задать блокам одинаковую высоту?

Ответы (2 шт):