Сделать <textarea>заполнить высоту ячейки таблицы

Question

Я использую следующий код для создания таблицы с изображением и <textare>:

<code><table border="1" style="border-color: #a6a6a6" cellpadding="4" cellspacing="0" width="702">\
  <col width="455">
  <col width="230">\
  <tbody>
    <tr>\
      <td type="image" id="' + sdfsdsdf + '" data-parent-id="0" data-type="NORMAL" data-img="1" data-flags="1" data-type-ios="3" height="85" width="455"><img src="http://www.whichcitytotravel.com/wp-content/uploads/2016/01/Sunset-in-Monaco.jpg" style="width:100%;"></td>\
      <td width="230">
        <pre><textarea id="' + sdfsdfsdaf + '" data-parent-id="' + id_picture + '" data-type="sdfsdafsd" data-type-ios="4" rows="5" style="width:100%; height:100%; display:block;"></textarea>

\

Результат выглядит так: https://jsfiddle.net/705buxgz/

Я бы хотел, чтобы <textarea> заполнил всю высоту, доступную внутри ячейки таблицы.

Я попробовал все остальные ответы здесь, и ни один из них не работал для меня.

Answer 1

Это должно сработать: https://jsfiddle.net/cLro4q10/

Вы должны установить высоту table и pre. В этом случае я сделал это на 100%. Ребенок может быть только на 100% ростом своего родителя, если рост родителей был установлен.