如何将所有 td 空间与 textarea 一起使用？答案

【问题标题】：How can I use all td space with a textarea?如何将所有 td 空间与 textarea 一起使用？
【发布时间】：2017-03-22 09:45:16
【问题描述】：

我希望我的textarea使用所有height 空间和css 配置，但我不能。你能帮我么？谢谢。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        td{
            border: solid black 1px;
        }
        textarea{
            height: 100%;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <textarea class="textarea1"></textarea>
            </td>
            <td>
                a<br/>
                a<br/>
                a<br/>
                a<br/>
                a<br/>
            </td>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

标签： javascript html css height

【解决方案1】：

td 也需要height: 100%。我将它应用于所有这些，但您可能只想将其限制为具有textarea 的那个，具体取决于您如何实现它。还制作了textareadisplay: block，因为这将删除底部的一点空白。你也可以使用vertical-align: top 代替display: block

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style type="text/css">
    table,tr,td{
      height: 100%;
    }
    td { border: solid black 1px; }
    textarea{
      height: 100%;
      display: block;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td>
        <textarea class="textarea1"></textarea>
      </td>
      <td>
        a<br/> a
        <br/> a
        <br/> a
        <br/> a
        <br/>
      </td>
    </tr>
  </table>
</body>

</html>

【讨论】：

@Alohci 对，谢谢。我在 Mac 上，没有我的边缘虚拟机，但 FF 在tr,td 上需要height: 100%，我相信边缘在table,tr,td 上需要height: 100%。更新了我的答案 - 你能检查一下边缘吗？
是的，经过修改，文本区域在 FF 和 Edge 中的大小大约是正确的。 - 虽然稍微错位，尤其是。 FF（在 Windows 上）。

【解决方案2】：

试试这个

td{
        border: solid black 1px;
        height: 100%;
        padding:0px;
    }
    textarea{
        height: 100%;
        display: block;
    }

<table>
  <tr>
    <td><textarea></textarea></td>
  </tr>
</table>

【讨论】：