Puis-je empêcher les boîtes de texte 100% Largeur de s'étendre au-delà de leurs conteneurs?

Cela a résolu le problème pour moi!

, Sans la nécessité pour un externe div. Juste de l'appliquer à votre zone de texte.

box-sizing: border-box; 

avec cette propriété "les propriétés largeur et hauteur (et les propriétés min/max) comprennent le contenu, le rembourrage et la bordure, mais pas la marge"

voir la description du bien à w3schools .

Espérons que cette aide quelqu'un!

vient de rencontrer ce problème moi-même, et la seule solution que j'ai pu trouver qui a fonctionné dans tous mes navigateurs de test (IE6, IE7, Firefox) était la suivante:

1. Envelopper le champ de saisie séparée en deux DIVs
2. régler la DIV externe à la largeur de 100%, ce qui empêche notre conteneur de déborder le document
3. mettez du rembourrage dans le DIV interne du montant exact pour compenser le débordement horizontal de l'entrée.
4. mettre le rembourrage personnalisé sur l'entrée de sorte qu'il déborde du même montant que j'ai autorisé dans la DIV interne

le code:

<div style="width: 100%">
    <div style="padding-right: 6px;">
        <input type="text" style="width: 100%; padding: 2px; margin: 0;
                                  border : solid 1px #999" />
    </div>
</div>

ici, le débordement horizontal total pour l'élément d'entrée est de 6px - 2x(rembourrage + bordure) - donc nous avons placé un rembourrage-à droite pour la DIV interne de 6px.

box-sizing de soutien est assez bon en fait: http://caniuse.com/#search=box-sizing

donc à moins que vous ne cibliez IE7, vous devriez être en mesure de résoudre ce genre de problèmes en utilisant cette propriété. Une couche telle que sass ou moins rend plus facile de manipuler des règles préfixées comme ça, btw.

en fait, c'est parce que CSS définit 100% par rapport à la largeur entière du conteneur, y compris ses marges, bordures, et rembourrage; cela signifie que l'espace disponible. à son contenu est une certaine quantité inférieure à 100%, à moins que le récipient n'a pas de marges, bordures, ou de rembourrage.

C'est contre-intuitif et largement considéré par beaucoup comme une erreur que nous sommes maintenant coincé avec . Cela signifie effectivement que % dimensions ne sont pas bonnes pour autre chose qu'un conteneur de premier niveau, et même alors, seulement s'il n'a pas de marges, de bordures ou de rembourrage.

notez que les marges, les bordures et le rembourrage du champ de texte sont inclus dans la taille CSS spécifiée pour lui - c'est le conteneur qui jette les choses.

j'ai travaillé de manière tolérable autour de lui en utilisant 98%, mais c'est une solution moins que parfaite, puisque les champs d'entrée ont tendance à tomber plus loin que le conteneur obtient plus grandes.

EDIT: je suis tombé sur ce la même question - je n'ai jamais essayé le réponse donnée, et je ne sais pas pour vous si cela s'applique à votre problème, mais il semble comme il va.

Une solution qui peut fonctionner (il fonctionne pour moi) est d'appliquer marge négative à l'entrée (zone de texte) ... ou largeur fixe pour ie7 ou à la baisse ie7 soutien. Il en résulte une largeur parfaite de pixel.. Pour moi son 7 donc j'ai ajouté 3 et 4 mais il est toujours parfait pixel..

j'ai eu le même problème et j'ai détesté avoir des divs supplémentaires pour border etc!

voici Donc ma solution qui semble fonctionner!

Vous devez utiliser un ie7 uniquement feuille de style pour éviter les craquements d'étoile.

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}

si vous ne pouvez pas utiliser box-sizing:border-box vous pouvez essayer de supprimer le width:100% et de mettre un très grand size attribut dans l'élément <input> , l'inconvénient est cependant vous devez modifier le html, et ne peut pas le faire avec CSS seulement:

<input size="1000"></input>

si vous n'avez pas besoin de le faire dynamiquement (par exemple, votre forme est d'une largeur fixe), vous pouvez juste régler la largeur de l'enfant <input> éléments à la largeur de leur conteneur moins toutes les décorations comme le rembourrage, marge, bordure, etc.:

 // the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
  font-size: 16px;
  height: auto;
  display: block;
  width: 280px;
  margin-bottom: 15px;
  padding: 7px 9px;
}

si vous ne pouvez pas utiliser la taille de la boîte (par exemple, lorsque vous convertissez HTML en PDF en utilisant iText). Essayez ceci:

CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } 
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

HTML

<div class="input-wrapper">
     <input type="text" value="" name="city"/>
</div>

Cela fonctionne:

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

la première 'largeur' est une règle de repli pour les navigateurs plus anciens.

il suffit de styliser l'entrée pour compenser le rembourrage supplémentaire. Dans l'exemple suivant, le rembourrage sur l'entrée serait 10px à gauche et à droite pour un total de rembourrage décalage de 20px:

input[type=text]{
   width: calc(100% - 20px);
}