Largeur : 100 %-padding ?

Question

J’ai une entrée html.

L’entrée a `` je veux qu’il soit 100 % de la largeur de la div parent (qui est liquide).

Toutefois l’utilisation de provoque l’entrée d’être Comment puis-je contourner cela ?

Exemple de

Answer 1

Lire les autres réponses ici, ou de lire cette réponse: le Contenu de la div est plus longue div même lorsque la largeur est fixée à 100%?

box-sizing: border-box est un rapide, facile, moyen pour résoudre ce problème:

Cela fonctionne dans tous les modernes les navigateurs, et IE8+.

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

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

_{Si vous en avez besoin pour travailler dans IE7, vous pouvez lire une ancienne version de cette réponse.}

Answer 2

C'est pourquoi nous avons box-sizing en CSS.

J'ai édité votre exemple, et maintenant il fonctionne dans Safari, Chrome, Firefox et Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/ Tous j'ai ajouté:

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

Malheureusement les anciens navigateurs tels que IE7 ne prennent pas en charge cette. Si vous êtes à la recherche d'une solution qui fonctionne dans le vieux-S, découvrez les autres réponses.

Answer 3

Utiliser le remplissage en pourcentages trop et retirer la largeur :

 Rembourrage : 5 % ; Largeur : 90 % ; 

Answer 4

Vous pouvez le faire sans l'aide d' box-sizing et pas clair solutions comme width~=99%.

Démo sur jsFiddle:

• Garder l'entrée de l' padding et border
• Ajouter à l'entrée négative horizontal margin = border-width + horizontal padding
• Ajouter à l'entrée du wrapper horizontal padding égal à margin à partir de 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 */ 
}

Answer 5

Utiliser les css calc()

Super simple et génial.

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

Comme on le voit ici: Div de largeur 100% moins d'une quantité fixe de pixels
Par webvitaly (http://stackoverflow.com/users/713523/webvitaly)
Source d'origine: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

Juste copié ici, parce que j'ai presque raté dans l'autre thread.