如何使 textarea 填充其父宽度的宽度？答案

【问题标题】：How to make textarea fill the width of its parent width?如何使 textarea 填充其父宽度的宽度？
【发布时间】：2010-07-31 12:20:59
【问题描述】：

鉴于我们事先不知道 div 的宽度？

我的想法：用 JS 计算 div 的宽度，找到一种将其转换为 cols 的方法，然后将 css 应用到 textarea 中。但也许没有必要重新发明轮子？

谢谢。

【问题讨论】：

【解决方案1】：

<textarea style="width:100%">* 在大多数情况下都可以使用。

如果不是，请提供更多信息！

_{* 注意：出于某种原因，它需要cols 和rows 属性来验证。但是设置宽度或高度会覆盖它们，所以输入你想要的任何值。}

【讨论】：

+1 我从来没有意识到你需要这些属性才能使width:100% 工作。如果调整了父容器的大小，我使用了其他一些方法来自动调整 textarea 的大小，但现在它变得容易多了:) 谢谢！
@FelixKling 我不认为cols 和rows 是使width:100% 工作所必需的... cols 和rows 是textarea HTML 的必需属性元素，没有它们被认为是无效的，即 HTML 验证器会抱怨。 width:100% 以您期望的方式工作，是浏览器的一项功能。这不适用于旧版浏览器。

【解决方案2】：

我建议flex 优于width: 100%，因为100% 通常不考虑边框，导致出现水平滚动。

<div style="display: flex">
    <textarea style="flex: 1"></textarea>
</div>

【讨论】：