Textarea remplissant exactement le conteneur parent, avec remplissage

Question

Je veux un <textarea> pour remplir complètement un conteneur parent de taille absolue, avec un remplissage dans la zone de texte. Cela fonctionne pour Chrome en utilisant le code suivant :

<div id="wrap"><textarea>hello stack overflow 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 }

Malheureusement, Firefox (v5) ne respecte pas correctement la position droite/basse, ce qui produit ces résultats :

Voici un truc qui montre le problème en action : http://jsfiddle.net/ZEhwR/

Comment puis-je obtenir le résultat indiqué dans la première phrase avec Chrome et FF (et idéalement avec IE9) ?

Answer 1

Utilisation width: 100%; height: 100%; pour faire de la <textarea> remplir l'emballage <div> . Malheureusement, vous ne pourrez pas ajouter de marges/encadrement, car ils s'ajoutent aux 100 %, de sorte que les bords droit et inférieur déborderont.

Editer : A utiliser width: 100%; ainsi que le rembourrage, vous pouvez modifier le modèle de dimensionnement de la boîte :

    width: 100%;
    height: 100%; 
    box-sizing: border-box;

Avec cette modification, 100% fait désormais référence à la distance entre les côtés extérieurs des bordures, au lieu de la distance entre les côtés extérieurs du contenu.

Answer 2

J'ai une solution qui permet d'avoir une largeur et une hauteur de 100 % avec un rembourrage dans la zone de texte. J'utilise des marges négatives pour obtenir l'effet désiré.

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

Testé sur Google Chrome et Firefox

Answer 3

C'est un cas où je recommande vivement de modifier le balisage (cela ne nuira même pas à la sémantique) :

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%;
}

Vous devriez pouvoir redimensionner la zone de texte verticalement sans problème. Si vous utilisez inline-block pour l'étiquette, vous devriez pouvoir la redimensionner horizontalement également.

L'avantage de l'utilisation de l'étiquette est qu'en cliquant sur l'étiquette, le champ de texte reste activé comme si vous aviez cliqué sur le champ de texte. De plus, en utilisant le sélecteur descendant, vous conserverez vos styles de zone de texte par défaut lorsque vous aurez simplement besoin d'une zone de texte ordinaire.

Answer 4

Si le seul problème auquel vous êtes confronté est que le rembourrage sera ajouté à la largeur et à la hauteur de 100 %, vous pouvez envisager l'utilisation de la propriété CSS3 "box-sizing".

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

Dans ce cas, la boîte aura une largeur totale de 100px au lieu de 120px.

Pour en savoir plus sur la valeur des biens immobiliers, consultez le site suivant lien