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

Question

Я хотел бы установить textarea на 100% высоту. Я использую Bootstrap 3, но не смог найти подходящий вариант.

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

Как это сделать?

Answer 1

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

См demo on Fiddle

Answer 2

textarea { 
    min-height: 100%; 
} 

Answer 3

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

textarea { 
    height: 100%; 
} 

По отношению к верхнему слою.

Answer 4

Я считаю, что это самозагрузки вопрос. Я столкнулся с аналогичной проблемой, когда текстовое поле не допускало более 1 строки. Я обнаружил (через пробную версию и ошибку), что размещение textarea в 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> 

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

Answer 5

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

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

Answer 6

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

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

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

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

Answer 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>