Html Textarea 使用填充精确填充父容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6795981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Textarea to fill a parent container exactly, with padding
提问by Phrogz
I want a <textarea>to completely fill an absolutely-sized parent container, with padding in the textarea. I have this working for Chrome using the following code:
我想要一个<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 }
Unfortunately, Firefox (v5) does not properly honor the right/bottom position, producing these results:
不幸的是，Firefox (v5) 没有正确尊重右/底部位置，产生以下结果：
Here's a fiddle showing the problem in action: http://jsfiddle.net/ZEhwR/
这是一个显示问题的小提琴：http: //jsfiddle.net/ZEhwR/
How can I achieve the result stated in the first sentence across Chrome and FF (and ideally IE9 as well)?
我怎样才能在 Chrome 和 FF（理想情况下也是 IE9）中实现第一句中所述的结果？
回答by Marc B
Use width: 100%; height: 100%;to make the <textarea>fill up the wrapping <div>. Unfortunately, you won't be able to put on margins/padding, as they get ADDED to the 100%, so the right/bottom edges will overflow.
使用width: 100%; height: 100%;使<textarea>填充了包装<div>。不幸的是，您将无法添加边距/填充，因为它们被添加到 100%，因此右/下边缘将溢出。
Edit: To use width: 100%;along with padding, you can change the box sizing model:
编辑：要width: 100%;与填充一起使用，您可以更改框大小模型：
width: 100%;
height: 100%;
box-sizing: border-box;
With this change, 100%now refers to the distance between the outsides of the borders, instead of the distance between the outside of the content.
有了这个变化，100%现在指的是边框外部之间的距离，而不是内容外部之间的距离。
回答by ShadyKiller
I have a solution where you can have 100% width and height with padding in the text area. I use negative margins to achieve the desired effect.
我有一个解决方案，您可以在文本区域中使用 100% 的宽度和高度填充。我使用负边距来达到预期的效果。
HTML:
HTML：
<div class="container">
<textarea class="text"/></textarea>
</div>
CSS:
CSS：
.container{
padding: 10px
border: 1px solid silver
}
.container .text{
resize: none;
outline: none;
width: 100%;
padding: 10px;
border: none;
height: 100%;
margin: -10px;
}
Tested this working on Google Chrome and Firefox
在 Google Chrome 和 Firefox 上测试了这个
回答by zzzzBov
This is a case where I highly recommend changing the markup (it wont even hurt the semantics):
在这种情况下，我强烈建议更改标记（它甚至不会损害语义）：
HTML
HTML
<div id="wrap">
<label class="textarea-label">
<textarea></textarea>
</label>
</div>
CSS
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%;
}
You should still be able to resize the textarea vertically without issues. If you use inline-blockfor the label, you should be able to resize horizontally as well.
您应该仍然能够垂直调整 textarea 的大小而不会出现问题。如果您inline-block用于标签，您应该也可以水平调整大小。
The advantage of using the label is that clicking on the label will still focus the textarea as if you had clicked on the textarea. Additionally, using the descendant selector, you'll preserve your default textarea styles when you just need a plain-ol' textarea.
使用标签的好处是点击标签仍然会聚焦文本区域，就像你点击了文本区域一样。此外，使用后代选择器，当您只需要一个普通的文本区域时，您将保留默认的文本区域样式。
回答by Yacoub Oweis
If the only problem your facing is the padding will be added to the 100% width and height, you may consider the box-sizing CSS3 property. here is an example
如果您面临的唯一问题是填充将添加到 100% 宽度和高度，您可以考虑使用 box-sizing CSS3 属性。这是一个例子
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
padding: 10px;
}
In this case the box will have a total width of 100px instead of 120px.
在这种情况下，框的总宽度为 100 像素而不是 120 像素。
More about this property values check this link
有关此属性值的更多信息，请查看此链接
