如何在 div 内完全适合 textarea - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15855951/
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
How to fit textarea exactly inside a div - CSS
提问by blasteralfred Ψ
I have a <div>with fixed width and height (may be in px / %). I have a <textarea>inside that, having a width of 100%, like;
我有一个<div>固定的宽度和高度（可能以 px / % 为单位）。我有一个<textarea>内部，宽度为 100%，例如；
HTML
HTML
<div>
<textarea></textarea>
</div>
CSS
CSS
div{
height: 200px;
width: 300px;
background: red;
}
textarea{
height: 100px;
width: 100%;
}
But the </textarea>is stretching out of the container, like;
但是</textarea>它从容器中伸出来，就像;
I want the textarea to stretch to 100% with of the container. How can I achieve this?
我希望 textarea 与容器一起拉伸到 100%。我怎样才能做到这一点？
Hereis the working fiddle.
这是工作小提琴。
回答by Niet the Dark Absol
Add box-sizing:border-boxto the textarea's CSS.
添加box-sizing:border-box到 textarea 的 CSS。
回答by user2253201
You can use box-sizing. But each browser is different, so this example works for all class A browsers.
您可以使用 box-sizing。但是每个浏览器都是不同的，所以这个例子适用于所有 A 类浏览器。
textarea{
height: 100%;
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
回答by Benjamin B.
The textarea has native padding and border.
textarea 具有本机填充和边框。
If you set :
如果您设置：
textarea{
height: 100px;
width: 98%;
padding:1%;
border:none;
}
It will be fitted :)
它将被安装:)
