Получение HTML-элементов управления textarea для расширения на ширину контейнера - PullRequest
Новая
       28

Получение HTML-элементов управления textarea для расширения на ширину контейнера

5 голосов
/ 04 марта 2012

Я хочу, чтобы мои элементы управления textarea следовали стандартному поведению макета отображения блока, чтобы они расширялись до ширины содержащего родителя.Простая установка display:block; не сделает этого - по умолчанию используется значение по умолчанию.Установка width:100%; не работает, потому что любые отступы в элементах управления означают, что они выходят за границы контейнера.

HTML: 

<div class='container'>
    <div >test</div>
</div>
<div class='container'>
    <textarea >test</textarea>
</div>​

CSS: 

.container {
    width:300px;
    border:black solid 1px;
    margin:10px;
}
.container > div {
    display:block;
    padding:10px;
    background:red;
}
.container > textarea {
    display:block;
    padding:10px;
    background:red;
}

РЕЗУЛЬТАТ:

enter image description here

http://jsfiddle.net/hKcjc/

1 Ответ

14 голосов
/ 04 марта 2012

Для решения этой проблемы вы можете использовать свойство css3 box-sizing: http://jsfiddle.net/QK78b/

Добавить следующее: 

width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

См. Размер коробки | CSS-хитрости для объяснения этой проблемы и ее связи с TextAreas

...