web-dev-qa-db-fra.com

largeur: 100% 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 parente (qui est fluide).

Cependant, si vous utilisez width: 100%;, l’entrée devient 100% + 20px, comment puis-je résoudre ce problème?

Exemple

htmlcsswidthfluid-layout
367
Hailwood

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

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

442
thirtydot

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

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

_input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
_

Malheureusement, les navigateurs plus anciens tels que IE7 ne le supportent pas. Si vous recherchez une solution qui fonctionne dans les anciens IE, consultez les autres réponses.

274
Mathias Bynens

Utilisez également des pourcentages de remplissage et supprimez-les de la largeur:

 rembourrage: 5%; 
 largeur: 90%;
39
Alex

Vous pouvez le faire sans utiliser box-sizing et des solutions non claires comme width~=99%.

Démo sur jsFiddle :
enter image description here

  • Conserver les entrées padding et border
  • Add to input horizontal négatif margin = border-width + horizontal padding
  • Ajouter à l'emballage de l'entrée horizontal padding égal à margin 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 */ 
}
27
Vladimir Starkov

Utilisez 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: largeur de 100% moins nombre de pixels fixe
Par webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Source originale: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

Juste copié ceci ici, parce que j'ai failli le manquer dans l'autre fil.

18
Daan

En supposant que je suis dans un conteneur avec un rembourrage de 15px, voici ce que j’utilise toujours pour la partie interne:

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

Cela étendra la partie interne à n'importe quelle largeur, moins les 15px de chaque côté.

À votre santé

Andy

8
Andology

Vous pouvez essayer quelques astuces de positionnement. Vous pouvez placer l’entrée dans un div avec position: relative et une hauteur fixe, puis sur l’entrée, vous aurez position: absolute; left: 0; right: 0;, et le remplissage que vous préférez.

Exemple en direct

5
Felix

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

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

4
M.YPC

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 exemple ici: http://jsfiddle.net/L7wYD/1/

4
Martin Jespersen

Comprenez simplement la différence entre width: auto; et largeur: 100%; Largeur: auto; (AUTO) calculera MATICALEMENT la largeur afin de s’ajuster exactement à la position de la div de l’emballage, y compris le rembourrage. Largeur 100% étend la largeur et ajoute le remplissage.

2
user3849374

Qu'en est-il de l'envelopper dans un conteneur. Le conteneur doit avoir le style suivant:

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

Essaye ça:

width: 100%;
box-sizing: border-box;
0
Manolo Ramos

J'ai eu le même problème. Corrige ça comme ça:

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;

À votre santé

0
manualva