Textarea pour remplir un conteneur parent exactement, avec un remplissage

Je souhaite qu’un </code> remplisse complètement un conteneur parent de taille absolue, avec un remplissage dans la zone de texte. Je travaille pour Chrome en utilisant le code suivant: </p> <pre class="lang-html prettyprint-override"> <code><div id="wrap"><textarea>hello stack overflow world

 /* 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 }

entrer la description de l'image ici

Malheureusement, Firefox (v5) n’honore pas correctement la position droite / inférieure, produisant ces résultats:

Rendu de Firefox du balisage; la textarea ne remplit pas le récipient.

Voici un violon montrant le problème en action: http://jsfiddle.net/ZEhwR/

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

width: 100%; height: 100% utilisation width: 100%; height: 100% width: 100%; height: 100% pour que la zone de texte remplisse le div enveloppant. Malheureusement, vous ne pourrez pas insérer de marges / rembourrage, car elles seront ajoutées à 100%, de sorte que les bords droit / inférieur déborderont.

Edit : Pour utiliser width:100% avec padding, vous pouvez modifier le modèle de dimensionnement de la boîte :

 width:100%; height:100%; box-sizing: border-box; /* For IE and modern versions of Chrome */ -moz-box-sizing: border-box; /* For Firefox */ -webkit-box-sizing: border-box; /* For Safari */

Avec ce changement, 100% fait maintenant référence à la distance entre les bordures extérieures, au lieu de la distance entre l’extérieur du contenu.

J’ai une solution où vous pouvez avoir 100% de largeur et de hauteur avec un remplissage dans la zone de texte. J’utilise des marges négatives pour obtenir l’effet désiré.

HTML:

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é cela fonctionnant sur Google Chrome et Firefox

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

HTML

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 toujours être capable de redimensionner la zone de texte verticalement sans problèmes. Si vous utilisez un inline-block pour l’étiquette, vous devriez également pouvoir le redimensionner horizontalement.

L’avantage d’utiliser l’étiquette est que cliquer sur l’étiquette focalisera toujours la zone de texte comme si vous aviez cliqué sur la zone de texte. De plus, en utilisant le sélecteur de descendants, vous conserverez vos styles de textarea par défaut lorsque vous avez simplement besoin d’une zone de texte simple.

Si le seul problème que vous rencontrez est le remplissage sera ajouté à la largeur et à la hauteur de 100%, vous pouvez considérer la propriété CSS3 de redimensionnement de boîte. Voici un exemple

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

En savoir plus sur cette propriété