Wie setze ich ein Textarea in Bootstrap 3 auf 100% Höhe?

Question

Ich möchte eine textarea auf 100% Höhe setzen. Ich verwende Bootstrap 3, konnte dort aber keine Option finden.

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

Wie geht das?

Answer 1

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

Siehe demo on Fiddle

Answer 2

textarea { 
    min-height: 100%; 
} 

Answer 3

können Sie CSS verwenden:

textarea { 
    height: 100%; 
} 

Bezogen auf die oberste Schicht.

Answer 4

Ich glaube, das ein Bootstrap-Problem. Ich stieß auf ein ähnliches Problem, wo das Textfeld nicht mehr als 1 Zeile erlaubte. Ich fand (durch Versuch und Irrtum), dass ich das Textarea in ein div platzierte und dann den form-group- (x) Aufruf innerhalb des ersten div ignorierte. Ich konnte die Zeilen und die Spalten innerhalb des Textarea kontrollieren.

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

Ändern Sie den Code der Form-Gruppenfunktionalität zu verwenden, das Problem beheben:

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

, die den Trick für Sie tun sollten.

Answer 5

Das funktionierte für mich. Ich benutze auch Bootstrap 3. Mein Textfeld befindet sich in einem Container.

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

Answer 6

Ist für mich nicht für Bootstrap-3- davidkonrad arbeiten Sie können versuchen, die Anzahl der Zeilen

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

oder geben eine Höhe für den Container Mutter

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

Answer 7

fixiert zu ändern

Das löst mein Problem .. Ich setze die Höhe auf auto! Wichtig.

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