使 <textarea> 填充表格单元格的高度答案

【问题标题】：Make <textarea> fill table cell's height使 <textarea> 填充表格单元格的高度
【发布时间】：2019-03-07 15:56:45
【问题描述】：

我使用以下代码创建一个带有图像和<textare> 的表格：

<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></pre><br></td>\
    </tr>
  </tbody>
</table>'

结果如下所示： https://jsfiddle.net/705buxgz/

我希望<textarea> 填充表格单元格内的所有可用高度。

我在这里尝试了所有其他答案，但没有一个对我有用。

【问题讨论】：

标签： javascript html css html-table textarea

【解决方案1】：

这应该可以解决问题：https://jsfiddle.net/cLro4q10/

您必须设置table 和pre 高度。在这种情况下，我做到了 100%。如果设置了父母的高度，则孩子只能是其父母的 100% 高度。

【讨论】：

如果我们完全删除pre 并将样式应用到<textarea> 会怎样？
删除pre 标签也可以。但是你的桌子仍然需要一个高度。
是的，我已经用它进行了测试，您的方法效果很好。

【解决方案2】：

我不知道这是否适用于所有人，那是因为我在我的 CSS 中找到了它。在我的 Site.css 文件中，我发现了以下内容：

input,
select,
textarea {
    max-width: 280px;
}

一旦我删除它，我的 textarea 就会填满单元格。但再一次，那只是因为我的 CSS。我删除了对“textarea”的引用，所以它看起来像

input,
select {
    max-width: 280px;
}

现在它可以工作了。

【讨论】：