height: 100% for <div> inside <div> with display: table-cell

http://stackoverflow.com/questions/22220698/height-100-for-div-inside-div-with-display-table-cell

by rahulsemwal1991

HTML

<div class="boxes">
<div class="box-row">


  <div class="box box1"><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p><p>Box 1</p></div>
   <div class="box box2">Box 2</div>
   <div class="box box3">Box 3</div>
   </div>
</div>

CSS

body {
  color: @beige;
}

.boxes {
  display:table;
  width: 100%;
  height: 100%;
}
.box-row{
  display:table-row;
}
.box {
  display: table-cell;
  text-align: center;
  // vertical-align:middle;
  line-height: 1em;
}

.box1 {
  background: orange;
}

.box2 {
  background: green;
}

.box3 {
  background: yellow;
}