如何将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％。我怎样才能做到这一点？

Here 是工作小提琴。

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;
}

它将适合：）