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)没有正确地履行权利/最低职位,产生了这些结果:

Firefox的标记渲染; textarea不填充容器。

这里是一个小提琴,显示问题的行动: 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。

更多关于这个属性值检查这个链接