如何使 textarea 填充 div 块？

Posted 2023-03-06

【中文标题】如何使 textarea 填充 div 块？

【英文标题】：How to make textarea to fill div block?

【发布时间】：2011-03-11 01:18:51

【问题描述】：

看看我在这里得到了多少：[链接已删除] 如何使绿色按钮上方的文本区域填充 div 块？ 我的意思是，如何使 textarea 的宽度与注释块的宽度完全一样？

【问题讨论】：

尝试给它一个width: 100%

如果就这么简单。无论如何，补充。检查链接。 :P

width: 100% 导致它溢出。您可以将宽度设置为 488 像素，这是其他框的宽度。我还没有检查它为什么会溢出 - 修复它可能是一个更好的解决方案。

这很棘手。由于 Box Model 和 padding，它会溢出。在其上强制使用 display: block 也不起作用，width: auto 也不起作用（这应该强制块级元素占据整个宽度而不会溢出）。好问题 - 我通常最终会使用像素宽度，但有兴趣看到解决方案。

Pekka，是的，这很棘手。我宁愿继续尝试，因为我不喜欢使用像素宽度。 ;D

【参考方案1】：

请参考这篇实现 CSS3 box-sizing 属性的文章 http://css-tricks.com/box-sizing/

一个快速的解决方案是设置

textarea 
     width: 100%;
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */

这是一个实现 box-sizing 属性的工作示例 http://css-tricks.com/examples/BoxSizing/

已经不鼓励在容器 div 内使用 99% 或稍小的宽度进行调整。

【讨论】：

不错且干净的解决方案，谢谢！但是“支持 IE8+：box-sizing”... 请注意，我在两年前 IE8 是最新版本时写了上述答案。即使是现在，您可能仍然有很多用户在运行 XP+IE6，具体取决于您的客户。

@Vinz，你的关心是真的。但是，我相信“使用旧浏览器是自己受苦”。如果IE不支持，那就是IE的问题，为什么会是我们的问题:) -

@Vinz，我不确定你对它的感受，但来自 twitter 的“Bootstrap”是一个很棒的平台，可以在现代界面上启动，如果我们尝试这样做会更好从这些高度优化的平台导入功能。

另请注意，您通常希望使用min-width: 100%; max-width: 100%;，以便它在您调整窗口大小时进行调整，但不会保持大于或小于窗口宽度的大小。 width: 100%; 最初仅将 textarea 设置为 100%，但用户调整它的大小可能会破坏文本框的布局和大小，我认为大多数人大部分时间都希望避免这种情况。

【参考方案2】：

以百分比为文本区域标注尺寸一直无法正常工作，几年前我遇到了同样的问题，最终使用了 width: 99%....

我建议你在 textarea 周围使用div 来绘制圆角边框并移除 textarea 本身的边框。这样文本区域的宽度就不需要精确了，你可以使用 98% 或 99%。

【讨论】：

哦，好吧 - 检查链接。结果非常好，但我仍然想知道也许有人知道如何在我的情况下正确地以百分比为文本区域标注尺寸？