Comment puis-je ajouter un remplissage à une zone de texte sans augmenter la largeur?
J'ai eu de la difficulté à mettre un textarea élément de la largeur à l'aide de rembourrage via CSS. La valeur de remplissage semble changer la largeur de la textarea, je préférerais qu'il ne peut pas faire.
C'est mon code HTML:
<div id="body">
<textarea id="editor"></textarea>
</div>
Et mon code CSS:
#body {
height:100%;
width:100%;
display:block;
}
#editor {
height:100%;
width:100%;
display:block;
padding-left:350px;
padding-right:350px;
}
Cependant, les valeurs de remplissage ne semblent pas fonctionner comme prévu. La largeur de la textarea est augmenté par 350px dans les deux directions, plutôt que de définir l'espace entre les bordures de l'élément et son contenu.
J'ai considéré comme juste centrer le textarea en définissant les marges à "0px auto", mais je tiens à l'utilisateur de toujours être en mesure de faire défiler le textarea si le curseur de la souris sur l'une des marges vides. Pour la même raison, je ne peux pas ajouter une autre div pour agir comme un wrapper, en tant que l'utilisateur ne serait pas en mesure de naviguer dans les zones de vide, mais seulement le long de la marge-moins textarea.
Quelqu'un peut-il aider?
source d'informationauteur
Vous devez vous connecter pour publier un commentaire.
La Modèle de boîte CSS définit la "largeur" comme la largeur du contenu, à l'exclusion de la frontière, de rembourrage et de la marge.
Heureusement, CSS3 a une nouvelle
box-sizing
propriété qui permet de modifier ce comportement à la place comprennent le remplissage etc. dans la largeur spécifiée à l'aide de:Selon le lien ci-dessus, la plupart des navigateurs modernes (y compris IE >= 8) à l'appui de cette propriété, mais ils ont des noms différents dans chaque navigateur.
Spécifier les largeurs et les marges/rembourrage dans '%' aide.
Voici un exemple -
Live @ http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result
La largeur spécifiée par CSS ne pas inclure rembourrage ou la frontière (en conformité avec les spécifications du W3C). Je suppose qu'une façon de le faire est avec un peu de JavaScript qui définit la largeur de #l'éditeur à la largeur de #corps moins 700 pixels, mais c'est un peu brouillon... ne sais Pas si il y a un CSS façon de faire ce que vous voulez ici. Bien sûr, vous pouvez utiliser la marge de registre puis le onMouseWheel événement pour le #corps et de travailler avec cette...
Certains navigateurs vous permettent de cibler l'espace réservé pour changer la couleur, etc., ainsi, vous pouvez ajouter rembourrage ainsi: