Textarea для заполнения родительского контейнера точно, с заполнением

Я хочу, чтобы <textarea> полностью заполнил родительский контейнер абсолютно необходимого размера, с заполнением в текстовом поле. У меня это работает для Chrome, используя следующий код:

<div id="wrap"><textarea>hello Qaru world</textarea></div>

/* Color and border CSS omitted for simplicity */
#wrap    { position:absolute; top:10%; left:20%; right:30%; bottom:60%      }
textarea { position:absolute; top:0; left:0; right:0; bottom:0; padding:1em }

enter image description here

К сожалению, Firefox (v5) неправильно соблюдает правую/нижнюю позицию, создавая эти результаты:

Firefox's rendering of the markup; the textarea does not fill the container.

Здесь сценарий, показывающий проблему в действии: http://jsfiddle.net/ZEhwR/

Как я могу достичь результата, указанного в первом предложении в Chrome и FF (и в идеале IE9)?

Ответы

Ответ 1

Используйте width: 100%; height: 100%, чтобы текстовое поле заполнило div. К сожалению, вы не сможете нанести маржи/отступы, так как они ДОБАВЛЯТЬ на 100%, поэтому края справа/внизу будут переполняться.

Изменить. Чтобы использовать width:100% вместе с дополнением, вы можете изменить модель размера рамки:

width:100%;
height:100%; 
box-sizing: border-box;         /* For IE and modern versions of Chrome */
-moz-box-sizing: border-box;    /* For Firefox                          */
-webkit-box-sizing: border-box; /* For Safari                           */

При этом изменении 100% теперь относится к расстоянию между внешними границами, а не расстоянию между пределами содержимого.

Ответ 2

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

HTML:

<div class="container">
    <textarea class="text"/></textarea>
</div>

CSS

.container{
  padding: 10px
  border: 1px solid silver
}

.container .text{
  resize: none;
  outline: none;
  width: 100%;
  padding: 10px;
  border: none;
  height: 100%;
  margin: -10px;
}

Протестировано это, работая над Google Chrome и Firefox

Ответ 3

Это случай, когда я настоятельно рекомендую изменить разметку (это даже не повредит семантике):

HTML

<div id="wrap">
  <label class="textarea-label">
    <textarea></textarea>
  </label>
</div>

CSS

.textarea-label
{
  display: block;
  /* border, padding, and other styles go here,
  don't set the height, and don't use floats or positioning */
}

.textarea-label textarea
{
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  width: 100%;
}

Вы все равно можете изменять размер текстового поля без проблем. Если вы используете inline-block для метки, вы также можете изменить размер по горизонтали.

Преимущество использования метки заключается в том, что щелчок по метке будет по-прежнему фокусировать текстовое поле, как если бы вы нажали на текстовое поле. Кроме того, используя селектор потомков, вы сохраните стили textarea по умолчанию, когда вам просто нужна текстовая область plain-ol.

Ответ 4

Если единственная проблема, с которой сталкивается ваша облицовка, будет добавлена ​​к ширине и высоте 100%, вы можете рассмотреть свойство CSS3 с размером окна. вот пример

.box {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  padding: 10px;
}

В этом случае поле будет иметь общую ширину 100 пикселей вместо 120 пикселей.

Подробнее об этом значении свойства проверьте ссылка