23

我有一个<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%。我怎样才能做到这一点？

这是工作小提琴。

4

3 回答 3

31

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

于 2013-04-06T21:01:06.700 回答
11

您可以使用盒子大小。但是每个浏览器都不一样，所以这个例子适用于所有 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/

于 2013-04-06T21:14:14.103 回答
5

textarea 具有原生填充和边框。

如果您设置：

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

它将被安装:)

于 2013-04-06T21:05:06.357 回答