Как разместить 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> тянется из контейнера, как;

Я хочу, чтобы текстовое поле растягивалось до 100% с контейнером. Как я могу это достичь?

Here является рабочей скрипкой.

Answer 1

Добавить box-sizing:border-box в textarea's CSS.

Answer 2

В текстовой области есть набивка и граница.

Если вы установили:

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

Он будет установлен :)

Answer 3

Вы можете использовать окно-проклейки. Но каждый браузер отличается, поэтому этот пример работает для всех браузеров класса А.

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/