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

StackOverflow https://stackoverflow.com/questions/271067

  •  06-07-2019
  •  | 
  •  

Вопрос

У меня есть следующий фрагмент CSS и HTML.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

Проблема в том, что текстовая область оказывается на 8 пикселей шире (2 пикселя для границы + 6 пикселей для заполнения), чем родительская.Есть ли способ продолжать использовать границу и отступы, но ограничить общий размер textarea по ширине родителя?

Это было полезно?

Решение

Почему нет?Забудьте о хаках и просто сделайте это с помощью CSS?

Тот, который я часто использую:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

См. поддержку браузера здесь.

Другие советы

Кажется, что ответом на многие проблемы с форматированием CSS является «добавьте еще один <div>!»

Итак, в этом духе вы пытались добавить div-обертку, к которой применяются границы/отступы, а затем поместить внутрь него текстовую область шириной 100%?Что-то вроде (непроверено):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

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

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

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

Если взглянуть на специфику W3C, мы можем заметить и другие преимущества:

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

Видеть Особенности W3C для более подробной информации.

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


<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
    display: block;
    border: 3px solid #38c;
    padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>



u003Cbody>u003Cdiv class="container">Я контейнер u003Clabel class="textareaContainer">u003Ctextarea name="text">, я мягкая Textarea с стилизованной границей ...u003C/textarea>u003C/label>u003C/div>u003C/body>u003C/html>

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

Если вас не слишком беспокоит ширина отступа, это решение также сохранит отступ в процентах.

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

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

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

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

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


<div class="textareacontainer">
    <textarea></textarea>
</div>

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

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

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

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

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

Я искал решение для встроенного стиля вместо решения CSS, и это лучшее, что я могу сделать для адаптивного текстового поля:

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

Если вы дополните и сместите его следующим образом:

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;

Это поможет

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

textarea.form-conrtol{
    height:auto;
}

А как насчет отрицательной маржи?

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

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

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

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

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;
}
<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top