Textarea 用填充精确填充父容器

Question

我想要一个<textarea> 来完全填充一个绝对大小的父容器，并在文本区域中进行填充。我使用以下代码为 Chrome 工作：

<div id="wrap"><textarea>hello stack overflow world</textarea></div>

/* Color and border CSS omitted for simplicity */
#wrap    { position:absolute; top:10%; left:20%; right:30%; bottom:60%      }
textarea { position:absolute; top:0; left:0; right:0; bottom:0; padding:1em }

不幸的是，Firefox (v5) 没有正确地尊重右/下位置，产生了以下结果：

这是一个显示实际问题的小提琴：http://jsfiddle.net/ZEhwR/

如何在 Chrome 和 FF（理想情况下也是 IE9）上实现第一句话中所述的结果？

Answer 1

使用width: 100%; height: 100%; 使<textarea> 填满包装<div>。不幸的是，您将无法添加边距/填充，因为它们会添加到 100%，因此右/下边缘会溢出。

编辑：要将width: 100%; 与填充一起使用，您可以更改box sizing model：

    width: 100%;
    height: 100%; 
    box-sizing: border-box;

随着这一变化，100% 现在指的是边框外侧之间的距离，而不是内容外侧之间的距离。

Answer 2

我有一个解决方案，您可以在文本区域中使用填充的 100% 宽度和高度。 我使用负边距来达到预期的效果。

HTML：

<div class="container">
    <textarea class="text"/></textarea>
</div>

CSS：

.container{
  padding: 10px
  border: 1px solid silver
}

.container .text{
  resize: none;
  outline: none;
  width: 100%;
  padding: 10px;
  border: none;
  height: 100%;
  margin: -10px;
}

在 Google Chrome 和 Firefox 上测试了此功能

Answer 3

这是我强烈建议更改标记的情况（它甚至不会损害语义）：

HTML

<div id="wrap">
  <label class="textarea-label">
    <textarea></textarea>
  </label>
</div>

CSS

.textarea-label
{
  display: block;
  /* border, padding, and other styles go here,
  don't set the height, and don't use floats or positioning */
}

.textarea-label textarea
{
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  width: 100%;
}

您应该仍然可以垂直调整文本区域的大小而不会出现问题。如果您使用inline-block 作为标签，您应该也可以水平调整大小。

使用标签的好处是点击标签仍然会聚焦文本区域，就像你点击了文本区域一样。此外，使用后代选择器，当您只需要一个纯文本区域时，您将保留默认的文本区域样式。

Answer 4

如果您面临的唯一问题是将填充添加到 100% 的宽度和高度，您可以考虑使用 box-sizing CSS3 属性。这是一个例子

.box {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  padding: 10px;
}

在这种情况下，盒子的总宽度将是 100 像素而不是 120 像素。

更多关于这个属性值的信息请查看link