Textarea用填充来准确填充父容器

Question

我希望<textarea>完全填充一个绝对大小的父容器，并在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;         /* For IE and modern versions of Chrome */
-moz-box-sizing: border-box;    /* For Firefox                          */
-webkit-box-sizing: border-box; /* For Safari                           */

通过此更改，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%;
}

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

使用标签的好处是点击标签仍然会像对待单击textarea一样聚焦textarea。此外，使用后代选择器，当您只需要一个普通的“textarea”时，您将保留默认的textarea样式。

Answer 4

如果你面临的唯一问题是填充将被添加到100％的宽度和高度，你可以考虑使用盒子大小调整CSS3属性。这是一个例子

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

在这种情况下，框的总宽度为100px而不是120px。

有关此属性值的更多信息，请查看此link