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

Question

У меня отображается следующий фрагмент кода 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>

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

Answer 1

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

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

Это поможет

Answer 2

Если вы дополняете и смещаете его так:

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

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

Answer 3

* {
    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>

Answer 4

Я часто исправляю эту проблему с 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; 
}

Answer 5

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

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