Как установить Textarea на 100% высоту в Bootstrap 3?

Ответ 1

html, body, .container {
  height: 100%;
}
textarea.form-control {
  height: 100%;
}

Смотрите демо на скрипте

Ответ 2

Я считаю, что это проблема начальной загрузки. Я столкнулся с аналогичной проблемой, когда текстовое поле не допускало более 1 строки. Я обнаружил (через пробную версию и ошибку), что размещение текстового поля в div, а затем игнорирование вызова form-group- (x) в первом div, я смог контролировать строки и столбцы в текстовом поле.

<div class="form-group">
    <label class="col-sm-3 control-label">Description</label>
    <div class="col-sm-9">
        <textarea class="form-control" rows="10"></textarea>
    </div>
</div>

Изменение кода для использования функциональности группы форм устранит проблему:

<div class="form-group">
    <textarea class="form-control" rows="8"></textarea>
</div>

Это должно сделать трюк для вас.

Ответ 3

textarea { 
   min-height: 100%;
}

Ответ 4

Вы можете использовать CSS:

textarea {
    height: 100%;
}

Относительно верхнего слоя.

Ответ 5

Не работает для меня для бутстрапа 3- davidkonrad Вы можете попробовать изменить количество строк

<textarea class="form-control" cols="60" rows="16"></textarea>

или задайте высоту, определенную для родительского контейнера

.form-group{
   height:250px;
 }
textarea{
   height:100%;
}

Ответ 6

Это сработало для меня. Я также использую Bootstrap 3. Моя текстовая область находится внутри контейнера.

textarea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Ответ 7

Это решает мою проблему. Я установил высоту в auto! important.

<label for="item_description" style="padding-top: 10px;">Item Description</label>
<textarea class="form-control" name="item_description" rows="3" style="height:auto !important;"></textarea>