Comment faire une largeur d'élément: 100% moins de rembourrage?

J'ai une entrée html.

L'entrée a padding: 5px 10px;Je veux que ce soit 100% de la largeur de la div parent (qui est fluide).

Cependant, l'utilisation de width: 100%;l'entrée 100% + 20pxpermet de contourner ce problème.

Exemple

box-sizing: border-box est un moyen rapide et facile de le réparer:

Cela fonctionnera dans tous les navigateurs modernes et IE8 +.

Voici une démo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Les versions préfixées du navigateur ( -webkit-box-sizing, etc.) ne sont pas nécessaires dans les navigateurs modernes.

C'est pourquoi nous avons box-sizingen CSS.

J'ai édité votre exemple, et maintenant cela fonctionne dans Safari, Chrome, Firefox et Opera. Vérifiez-le: http://jsfiddle.net/mathias/Bupr3/ Tout ce que j'ai ajouté était ceci:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Malheureusement, les navigateurs plus anciens comme IE7 ne le prennent pas en charge. Si vous recherchez une solution qui fonctionne dans les anciens IE, consultez les autres réponses.

Utilisez également le rembourrage en pourcentages et supprimez de la largeur:

rembourrage: 5%;
largeur: 90%;

Vous pouvez le faire sans utiliser box-sizinget pas des solutions claires comme width~=99%.

Démo sur jsFiddle :

• Conserver les entrées paddingetborder
• Ajouter à l'entrée horizontale négative margin= border-width+horizontal padding
• Ajouter au wrapper d'entrée horizontal paddingégal à celui marginde l'étape précédente

Balisage HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Utilisez css calc ()

Super simple et génial.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

Comme vu ici: largeur Div 100% moins quantité fixe de pixels
Par webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Source originale: http://web-profile.com.ua/css/dev/css -largeur-100prc-moins-100px /

Je viens de le copier ici, car je l'ai presque manqué dans l'autre fil.

En supposant que je suis dans un conteneur avec un rembourrage de 15 pixels, c'est ce que j'utilise toujours pour la partie intérieure:

width:auto;
right:15px;
left:15px;

Cela étirera la partie intérieure à n'importe quelle largeur, elle devrait être inférieure aux 15 pixels de chaque côté.

Vous pouvez essayer quelques astuces de positionnement. Vous pouvez mettre l'entrée dans un div avec position: relativeet une hauteur fixe, puis sur l'entrée avoir position: absolute; left: 0; right: 0;et n'importe quel rembourrage que vous aimez.

Exemple en direct

Voici la recommandation de codeontrack.com , qui contient de bons exemples de solutions:

Au lieu de définir la largeur de la div à 100%, réglez-la sur auto et assurez-vous que la valeur <div>est définie sur display: block (par défaut pour <div>).

Déplacez le remplissage de la zone de saisie vers un élément wrapper.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Voir l'exemple ici: http://jsfiddle.net/L7wYD/1/

Comprenez simplement la différence entre la largeur: auto; et largeur: 100%; Largeur: auto; calculera (AUTO) MATICALEMENT la largeur afin de correspondre exactement à la valeur indiquée avec la div de l'emballage, y compris le rembourrage. La largeur de 100% élargit la largeur et ajoute le rembourrage.

Qu'en est-il de l'emballage dans un récipient. Le conteneur doit avoir un style comme:

{
    width:100%;
    border: 10px solid transparent;
}

Essaye ça:

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

Pour moi, en utilisant margin:15px;padding:10px 0 15px 23px;width:100%, le résultat était le suivant:

La solution pour moi était d'utiliser width:autoau lieu dewidth:100% . Mon nouveau code était:

margin:15px;padding:10px 0 15px 23px;width:auto. Ensuite, l'élément s'est aligné correctement:

J'ai eu le même problème. Fixez-le comme ceci:

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

Tu peux le faire:

width: auto;
padding: 20px;