Как сделать textarea для заполнения блока div?

Посмотрите, как далеко я продвинулся здесь: [ссылка была удалена] Как сделать так, чтобы текстовое поле над зеленой кнопкой заполняло блок div? Я имею в виду, как сделать текстовую область точно такой же ширины, как и блок комментариев?


css textarea width
person Rihards    schedule 02.07.2010    source источник
comment
Попробуйте дать ему width: 100%   -  person Pekka    schedule 02.07.2010
comment
Если бы это было так просто. Во всяком случае, добавил. Проверьте ссылку. :П   -  person Rihards    schedule 02.07.2010
comment
width: 100% вызывает переполнение. Вы можете просто установить ширину на 488 пикселей, что соответствует ширине других ваших полей. Однако я не проверял, почему он переполняется - исправление этого может быть лучшим решением.   -  person Mike    schedule 02.07.2010
comment
Это сложно. Он переполняется из-за блочной модели и padding. Принудительное использование display: block также не работает, равно как и width: auto (что должно заставить элемент уровня блока занимать всю ширину без переполнения). Хороший вопрос - обычно я использую ширину в пикселях, но было бы интересно увидеть решение.   -  person Pekka    schedule 02.07.2010
comment
Пекка, да, это сложно. Я лучше продолжу попытки, так как мне не нравится использовать ширину пикселя. ;Д   -  person Rihards    schedule 02.07.2010
comment
Ссылка в вопросе не работает, не могли бы вы опубликовать, какие определения CSS вы использовали для достижения своей цели? Или что вас больше всего привлекло, если это не было полностью достигнуто... Я пытаюсь понять это сам.   -  person anttikoo    schedule 15.07.2011
comment
@stalemate, извините за ссылку, похоже, она была давно удалена, и я больше не могу найти соответствующую проблему и решение. :/   -  person Rihards    schedule 15.07.2011

Ответы (2)


arrow_upward
60
arrow_downward

Пожалуйста, обратитесь к этой статье, которая реализует свойство CSS3 box-sizing http://css-tricks.com/box-sizing/

Быстрое решение для этого состоит в том, чтобы установить

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

А вот рабочий пример, который реализует свойство box-sizing http://css-tricks.com/examples/BoxSizing/

Использование ширины, например, 99% или несколько меньше, для настройки внутри div-контейнера уже не рекомендуется.

person acpmasquerade    schedule 17.05.2012
comment
Хорошее и чистое решение, спасибо! НО Поддержка IE8+: box-sizing... Имейте в виду, что я написал ответ выше два года назад, когда IE8 была последней версией. И даже сейчас у вас может быть много пользователей, использующих XP+IE6, в зависимости от ваших клиентов. - person Vinz; 23.05.2012
comment
@Vinz, это правда с твоей заботой. Однако я считаю, что пользоваться старым браузером — значит страдать самостоятельно. Если IE не поддерживает, то это проблема IE, почему это должна быть наша проблема :) - - person acpmasquerade; 03.09.2012
comment
@Vinz, я не уверен, как вы к этому относитесь, но Bootstrap из твиттера — отличная платформа для запуска интерфейса в наши дни, и было бы лучше, если бы мы попытались импортировать функции с этих сильно оптимизированных платформ. - person acpmasquerade; 03.09.2012
comment
Также обратите внимание, что вы обычно хотите использовать min-width: 100%; max-width: 100%;, чтобы он регулировался при изменении размера окна, но не оставался больше или меньше размера, чем ширина вашего окна. Наличие width: 100%; только изначально устанавливает текстовую область на 100%, но пользователи, изменяющие ее размер, могут испортить макет и размер текстового поля, что, как я полагаю, большинство людей хотят предотвратить большую часть времени. - person ahnbizcad; 12.10.2014

arrow_upward
5
arrow_downward

Измерение текстовых полей в процентах почему-то никогда не работало должным образом, у меня была такая же проблема несколько лет назад, и в итоге я использовал ширину: 99%....

Я предлагаю вам использовать div вокруг текстовой области, чтобы нарисовать закругленную границу и удалить границу в самой текстовой области. Таким образом, ширина текстовой области не обязательно должна быть точной, вы можете использовать 98% или 99%.

person Vinz    schedule 02.07.2010
comment
О, хорошо - проверьте ссылку. Это сработало довольно хорошо, но все же мне интересно, может быть, кто-нибудь знает способ, как правильно задать размеры текстовых полей в процентах в моем случае? - person Rihards; 02.07.2010