td内的Textarea 100％高度由css答案

【问题标题】：Textarea 100% height inside td by csstd内的Textarea 100％高度由css
【发布时间】：2020-12-14 15:38:39
【问题描述】：

我希望这个 textarea 适合表格行的高度和宽度，所以我使用了 height: 100%;宽度 100%；在 textarea 和我在 td 上确定的高度宽度。现在textarea的宽度还可以，但高度不是100%，我正在努力使用下面的代码~

Check Image

<style>
body {text-align:center;font-family:Arial;font-weight:400;font-size: 16px;}
table {width:100%;text-align:center;border-collapse: separate;border-spacing: 15px 5px;}
td{padding:20px; box-shadow: 0px 0px 20px #e7e7e7; background-color: #fff;}
textarea{
width:100%;
height:100%;
 resize: none;
}
</style>

<table>
   <tr>
      <td rowspan='2' style='height: 78vh;width: 30%; line-height: 28px;'>   Layout - 1
      </td>
      <td rowspan='2' style='width: 40%;'>
         Layout - 2
      </td>
      <td height='42%' style='width: 30%;'>
         <textarea style='height:100% width:100%'></textarea>
      </td>
   </tr>
   <tr>
      <td height='42%'>
          <textarea style='height:100% width:100%'></textarea>
      </td>
   </tr>
</table>

但不工作，求助！如何在 td 内制作 100% 的 textarea 高度？请不要建议 rows="--" 属性。

【问题讨论】：

标签： html css html-table textarea

【解决方案1】：

这里有一些东西：

td textarea 
{
    width: 100%;
    height: 100%
}

<table border="1">
   <tr>
      <td rowspan='2'>   
        Layout - 1
      </td>
      <td rowspan='2'>
         Layout - 2
      </td>
      <td style="height:400px">
         <textarea></textarea>
      </td>
   </tr>
   <tr>
      <td style="height:100px">
          <textarea></textarea>
      </td>
   </tr>
</table>

我故意将单元格设置为不同的高度，以便您可以看到它实际上伸展到了 100%。

【讨论】：

您可以使用绝对测量值，但如果用户的屏幕宽度和高度不同，则无法使用。
@TimothyChen 绝对高度不要保持。它们只是为了证明textarea 占据了整个高度，应该将它们移除。

【解决方案2】：

你可以做 box-sizing:border-box;在 CSS 中，以确保它将整个 textarea 及其内容、填充和边框计算在内，作为其宽度和高度的一部分。还要确保更改实际 textarea 的 rows 和 cols 属性以确保它变得更大。

【讨论】：

哦，对不起，我忘了你还必须改变 textarea 的 rows 和 cols 属性来改变它的行数和列数，否则它会自动变成 1 行和列小。