Как установить плавающий элемент, автоматически заполняющий оставшуюся высоту его родительского элемента (высота не фиксирована и отображается в виде таблицы)?

Question

У меня есть следующий код:

.parent {width: 960px; display: table}

.1 {
  width: 45%;
  margin: 20px;
  float: left;
  height: 1000px; /* it can be smaller or bigger than this value to fit its content */
}

.2 {
  width: 45%;
  margin: 20px;
  float: right;
  height: 200px;
}

.3 {
  width: 45%;
  margin: 20px;
  float: right;
}

<div class="parent">
  <div class="1">1</div>
  <div class="2">2</div>
  <div class="3">3</div>
</div>

Как мне написать CSS для класса "3", чтобы его высота автоматически заполняла оставшуюся высоту таблицы (в случае выше, 720px, какродительский элемент тоже будет иметь высоту 1000 пикселей)?Обратите внимание, что высота класса "1" может изменяться в зависимости от его содержимого.

Не по теме: есть ли лучший способ сделать его похожим на рисунок ниже, кроме тех кодов, которые я сейчас использую (толькоиспользуя CSS и HTML)?

Изображение таблицы

Answer 1

Попробуйте это.третий элемент (зеленый) будет регулироваться в зависимости от высоты .one.Но это реализовано исходя из предположения, что .two имеет фиксированные размеры.

.parent {
    width: 960px;
    border: solid 2px #999;
    float: left;
    position: relative;
}
.one {
    width: 50%;
    float: left;
    height: 1000px;
    background: #ccc;
}
.two {
    width: 50%;
    float: right;
    height: 200px;
    background: #aaa;
}
.three {
    position: absolute;
    top: 200px;
    left: 50%;
    right: 0;
    bottom: 0;
    background: green;
}

<div class='parent'>
    <div class='one'>one</div>
    <div class='two'>two</div>
    <div class='three'>three</div>
</div>