Textarea准确填充父容器，填充
我想要一个<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）所述的结果？
使用width: 100%; height: 100% width: 100%; height: 100% ，使textarea填满包装div。 不幸的是，你将无法使用margin / padding，因为它们被加到100％，所以右边/底边会溢出。
编辑 ：要使用width:100%填充width:100% ，您可以更改框的大小模型 ：
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％是指边界之外的距离，而不是内容之外的距离。
我有一个解决scheme，你可以有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; }
testing了这个在Google Chrome和Firefox上的工作
这是我强烈build议改变标记（它甚至不会伤害语义）的情况：
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 ，则应该也可以水平resize。
使用标签的优点是点击标签仍然会集中textarea，就好像你点击了textarea一样。 此外，使用后代select器，当你只需要一个普通的'textarea'时，你将保留默认的textarea样式。
如果你面临的唯一问题是填充将被添加到100％的宽度和高度，你可以考虑框大小的CSS3属性。 这里是一个例子
.box { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100px; padding: 10px; }
在这种情况下，该框将具有100px的总宽度而不是120px。
更多关于这个属性值检查这个链接
