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>は次のように、容器の外に伸びています。

私は、テキストエリアをコンテナの100％伸ばしたいと思っています。どうすればこれを達成できますか？

Hereは作業フィドルです。

Answer 1

box-sizing:border-boxをテキストエリアのCSSに追加します。

Answer 2

テキストエリアには、ネイティブのパディングと枠線があります。

あなたが設定した場合：

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

を装着されます:)

Answer 3

あなたはボックスのサイズ変更を使用することができます。しかし、各ブラウザは異なるので、この例はすべてのクラスAブラウザで動作します。私のFirefox 6.02で動作していない

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/