Как я могу сделать ширину 100% TextArea без переполнения, когда заполнение присутствует в CSS?

У меня есть следующий снимок CSS и HTML.

textarea { border:1px solid #999999; width:100%; margin:5px 0; padding:3px; } 
 

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

Наилучший подход, на мой взгляд, заключается в том, чтобы максимально использовать решения низкого уровня, чтобы достичь максимальной поддержки браузеров. В этом случае только HTML может работать нормально, избегая использования Javascript (что так или иначе мы все любим).

Тег LABEL приходит в нашу помощь, потому что имеет такое поведение и разрешено содержать элементы ввода, к которым он должен обратиться. Его стиль по умолчанию – это один из встроенных элементов, поэтому, давая ярлыку стиль отображения блоков, мы можем использовать автоматическую ширину 100%, включая отступы и границы, в то время как внутренняя текстовая область не имеет границы, без заполнения и 100% ширины ,

Взглянув на особенности W3C, мы можем заметить следующие преимущества:

  • нет атрибута «для»: когда тег LABEL содержит целевой ввод, он автоматически фокусирует дочерний вход при нажатии;
  • если внешняя метка для текстового поля уже создана, конфликтов не возникает, так как данный вход может иметь одну или несколько меток.

Подробную информацию см. В Спецификации W3C .

Простой пример:

     

< Тело>

Я контейнер

Отступ и граница элементов .textareaContainer – это те, которые мы хотим отдать текстовой области. Попробуйте их отредактировать, как хотите. Я дал большие и видимые дополнения и границы для элемента .textareaContainer, чтобы вы могли видеть их поведение при нажатии.

Если вы не слишком беспокоитесь о ширине прокладки, это решение фактически сохранит заполнение в процентах.

 textarea { border:1px solid #999999; width:98%; margin:5px 0; padding:1%; } 

Не идеально, но вы получите некоторое дополнение, а ширина добавит до 100%, так что все его хорошее

Я столкнулся с другим решением, которое так просто: добавьте прописку – прямо в контейнер textarea. Это сохраняет маржу, границу и отступы на текстовом поле, что позволяет избежать проблемы, которую Бек указал на фокус, подчеркивающий, что хром и safari помещаются вокруг текстового поля.

Заполнение справа от контейнера должно быть суммой эффективного поля, границы и отступов по обеим сторонам текстового поля, плюс любое дополнение, которое вы, возможно, захотите использовать для контейнера. Итак, для случая в оригинальном вопросе:

 textarea{ border:1px solid #999999; width:100%; margin:5px 0; padding:3px; } .textareacontainer{ padding-right: 8px; /* 1 + 3 + 3 + 1 */ } 

 

Этот код работает для меня с IE8 и Firefox

    

Вы можете использовать свойство box-sizing, оно поддерживается всеми основными стандартными браузерами и IE8 +. Однако вам все равно понадобится обходной путь для IE7. Подробнее читайте здесь .

Нет, вы не можете сделать это с помощью CSS. Именно по этой причине Microsoft изначально представила другую, а может быть, более практичную коробчатую модель . Модель коробки, которая в конечном итоге выиграла, делает смешением смешение процентов и единиц.

Я не думаю, что с вами все в порядке, чтобы выразить прописку и ширину границы в процентах от родителя.

Если вы поместите и сметете это так:

 textarea { border:1px solid #999999; width:100%; padding: 7px 0 7px 7px; position:relative; left:-8px; /* 1px border, too */ } направо textarea { border:1px solid #999999; width:100%; padding: 7px 0 7px 7px; position:relative; left:-8px; /* 1px border, too */ } 

правая сторона текстового поля идеально выравнивается с правой стороной контейнера, а текст внутри текстового поля идеально согласуется с текстом тела в контейнере … а левая сторона текстовой области «высушивается» немного. это иногда красивее.

Использовать свойство размера коробки :

 -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 

Это поможет

Как насчет отрицательных полей?

 textarea { border:1px solid #999999; width:100%; margin:5px -4px; /* 4px = border+padding on one side */ padding:3px; } 

Для пользователей, которые используют Bootstrap, textarea.form-control также может привести к проблемам с размером текста. Chrome и Firefox, похоже, используют разные высоты со следующим Bootstrap CSS:

 textarea.form-conrtol{ height:auto; } 

Я часто исправляю эту проблему с помощью calc() . Вы просто даете textarea ширину 100% и определенное количество отступов, но вы должны вычесть общее левое и правое заполнение ширины 100%, которую вы указали в текстовое поле:

 textarea { border: 0px; width: calc(100% -10px); padding: 5px; } 

Или если вы хотите предоставить textarea границу:

 textarea { border: 1px; width: calc(100% -12px); /* plus the total left and right border */ padding: 5px; } 
 * { box-sizing: border-box; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } input[type=text], select, textarea{ width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; }