调整 textarea 的大小时，如果父元素是表格，它会扩展以适应，但当它是 div 时则不会。为啥？

Posted 2023-05-07

【中文标题】调整 textarea 的大小时，如果父元素是表格，它会扩展以适应，但当它是 div 时则不会。为啥？

【英文标题】：When re-sizing a textarea, if the parent element is a table, it expands to fit, but not when it's a div. Why?调整 textarea 的大小时，如果父元素是表格，它会扩展以适应，但当它是 div 时则不会。为什么？

【发布时间】：2012-07-26 14:38:13

【问题描述】：

我有一个 textarea (asp.net multiLine TextBox) 包裹在几个嵌套的 div 中。重新调整 textarea 的大小时，它会扩展所有其他元素。当包裹在桌子中时情况并非如此，因为它会向下和向右推动周围的元素以适应重新调整大小。如何让它在 div 中工作？

我不是 CSS 专家，但我尝试过包含子 div 的相对位置，但这只会使 textarea 在扩展时隐藏所有其他元素。我可以使用表格，但我试图摆脱表格进行布局。

我已经扩展了外部 div 以容纳具有相对定位的内部 div 的内容，但它似乎在这里不起作用。另外，溢出效果也不理想。

【问题讨论】：

你能展示你尝试过的东西吗？

请向 jsFiddle 提供您的问题。例如，div 内部的 textarea 有效。 参考： jsFiddle。 您可以修改小提琴并按下更新按钮来创建您的版本。

好的，here's 一个我正在尝试做的快速示例... textarea 应该向下和向右推包含 div

@Sheikh Heera 答案将起作用。此外，只需将width 更改为min-width 和height 更改为min-height 也可以。参考：jsFiddle。随意Upvote并接受他的回答。干杯！

【参考方案1】：

您可以使用div 获得相同的结果（如表格）

div
    display:table;

Here is a fiddle.

【讨论】：

-1 div 可以重新调整大小，其中包含 textarea，而不需要 display:table。

你看到我的例子了吗，它超出了固定的div。

如果一个div的宽高是固定的，那么你做不到，textarea会溢出div。

@arttronics, this is your fiddle 具有 div 的宽度和高度。

@Sheikh - 我最终使用了 min-height、min-width 和 display: table 的组合来获得我想要的。谢谢！