Comment définir une Textarea à 100% de hauteur dans Bootstrap 3?

Je voudrais mettre un textarea à 100% de la hauteur. Je suis en utilisant Bootstrap 3mais ne pouvait pas trouver une option.

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

Comment faire?

source d'informationauteur Jay

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

    Voir démo sur le Violon

  2. 4

    Je crois que c'est un bootstrap question. J'ai rencontré un problème similaire où le textarea était de ne pas laisser plus de 1 ligne. J'ai trouvé (par essai et erreur) que le fait de placer la zone de texte dans un div et puis, ignorant la forme-groupe-(x) appel à l'intérieur de la première div, j'ai été en mesure de contrôler les lignes et les colonnes dans le textarea.

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

    La modification de votre code à utiliser le formulaire-groupe fonctionnalité de corriger le problème:

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

    Qui devrait faire l'affaire pour vous.

  3. 3
    textarea { 
   min-height: 100%;
}
  4. 3

    Ne fonctionne pas pour moi pour bootstrap 3 - davidkonrad
    Vous pouvez essayer de modifier le nombre de lignes

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

    ou donner une hauteur fixe pour le conteneur parent

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

    Vous pouvez utiliser les CSS: 

    textarea {
    height: 100%;
}

    Par rapport à la couche supérieure.

  6. 0

    Cela a fonctionné pour moi. Je suis en utilisant Bootstrap 3. Mon textarea est à l'intérieur d'un conteneur.

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

    Cela résout mon problème.. j'ai régler la hauteur de l'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>