Textarea 100% 高度在 td 内由 css

Question

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

检查图像

<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内textarea的高度为100%？请不要建议 rows="--" 属性。

Answer 1

有一个简单而甜蜜的技巧。textarea将位置设置为absolutetop 和 left 为 0，然后将 td 位置设置为相对位置。就这样。

在这种情况下，您不会强制为 td 或 textarea 设置特定的高度（以 px 为单位）。

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;
  position: relative
}
textarea{
  width:100%;
  height:100%;
  resize: none;
  position: absolute;
  top: 0;
  left:0;
}

<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></textarea>
      </td>
   </tr>
   <tr>
      <td height='42%'>
          <textarea></textarea>
      </td>
   </tr>
</table>