如何使文本区域填充整个 div 区块？

Question

看看我在这里做到了什么：[链接已删除] 如何使绿色按钮上方的文本区域填充整个div块？ 我的意思是，如何使文本区域与评论块完全相同宽度？

- Rihards

---

尝试给它一个width: 100%。 - Pekka

如果那是那么简单的话。无论如何，已经添加了。检查链接。 :P - Rihards

width: 100% 会导致溢出。你可以将宽度设置为488像素，这是你其他盒子的宽度。我还没有检查为什么会溢出 - 解决这个问题可能是更好的解决方案。 - Mike

这有点棘手。由于盒模型和 padding 的原因，它会发生溢出。强制使用 display: block 也无效，width: auto 也不行（应该可以强制块级元素占用整个宽度而不溢出）。好问题 - 我通常会使用像素宽度，但很想看到解决方案。 - Pekka

问题中的链接无法使用，您能否发布一下您最终使用的CSS定义是什么？或者如果没有完全实现，那么最接近的是什么...我正在尝试自己解决这个问题。 - anttikoo

Answer 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/

已经不推荐使用像99％或稍低的宽度来调整容器div。

- acpmasquerade

---

好的，干净利落的解决方案，谢谢！但是“支持IE8+：box-sizing”……请注意，我在两年前写下了上面的答案，当时IE8是最新版本。即使现在，您的客户可能仍有很多使用XP + IE6的用户。 - Vinz

@Vinz，你的担忧是正确的。 然而，我认为“使用旧浏览器就是自讨苦吃”。如果IE不支持，那么这是IE的问题，为什么应该成为我们的问题呢 :) - acpmasquerade

@Vinz，我不确定你对此有何感觉，但是Twitter的“Bootstrap”是一个非常棒的平台，适合现代界面的起步。如果我们尝试从这些经过大量优化的平台中导入功能，效果会更好。 - acpmasquerade

请注意，通常您需要使用 min-width: 100%; max-width: 100%; 来使文本框随着窗口调整而调整大小，但不保持比窗口宽度更大或更小的尺寸。只设置 width: 100%; 只是最初将文本区域设置为100％，但用户调整大小可能会破坏文本框的布局和大小，我想大多数人大部分时间都希望避免这种情况。 - ahnbizcad

Answer 2

以百分比方式放置文本区域似乎从未能正常工作，我几年前遇到了同样的问题，并最终使用 width: 99% 解决。

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

- Vinz

---

哦，好的 - 检查一下链接。 它运行得相当不错，但我仍然想知道在我的情况下有没有人知道如何正确地使用百分比来调整文本区域的尺寸？ - Rihards