如何将textarea完全放入div中 - CSS

Question

我有一个<div>固定的宽度和高度(可能是px /%).我有一个<textarea>内部,宽度为100%,像;

HTML

<div>
    <textarea></textarea>
</div>

CSS

div{
    height: 200px;
    width: 300px;
    background: red;
}
textarea{
    height: 100px;
    width: 100%;
}

但是</textarea>从容器伸出来就像;

我希望textarea能够与容器一起伸展到100%.我怎样才能做到这一点？

这是工作小提琴.

Answer 1

添加box-sizing:border-box到textarea的CSS.

Answer 2

您可以使用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+ */
}

http://jsfiddle.net/BwVQZ/7/

Answer 3

textarea具有本地填充和边框。

如果您设置：

textarea{
   height: 100px;
   width: 98%;
   padding:1%;
   border:none;
}

它将适合:)