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

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;

我有一个固定宽度和高度的

（可能是px /％）。我里面有一个

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完全放入div中 - CSS

但是正在伸出容器，就像;

I want the textarea to stretch to 100% with of the container. How can I achieve this?

我希望textarea能够用容器拉伸至100％。我怎样才能做到这一点？

Here is the working fiddle.

这是工作小提琴。

3 个解决方案

#1

Add box-sizing:border-box to the textarea's CSS.

将box-sizing：border-box添加到textarea的CSS中。

#2

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+ */
}

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

#3

The textarea has native padding and border.

textarea有原生填充和边框。

If you set :

如果你设置：

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

It will be fitted :)

它将适合:)

#1