Как правильно подобрать textarea внутри div - CSS

У меня есть <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% с контейнером. Как я могу достичь этого?

Здесь - рабочая скрипка.

Ответ 1

Добавьте box-sizing:border-box в textarea CSS.

Ответ 2

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

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

Текстовая область имеет встроенное дополнение и границу.

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

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

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